ReactJS
-
react ( Udemy강의 ) - 7. ReduxReactJS 2022. 5. 13. 13:03
Redux - 크로스 컴포넌트 또는 앱 와이드 상태를 위한 상태관리시스템 - 다수의 컴포넌트나 심지어는 앱 전체에서 관리하도록 도와줌 State 1. Local State : 데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태 useState/useReducer를 사용해 컴포넌트 안에서 로컬 상태 관리 2. Cross-Component State : 다수의 컴포넌트에 영향을 미치는 상태 props chains ( prop drilling ) 3. App-Wide State : 애플리케이션의 모든 컴포넌트에 영향을 미치는 상태 props chains ( prop drilling ) -> 리액트 컨텍스트 & 리덕스 : 크로스 컴포넌트 상태나 앱 와이드 상태를 관리하도록 도와줌 Redux ..
-
react ( Udemy강의 ) - 6. Building Custom Hooks & FormReactJS 2022. 4. 29. 11:06
Custom Hooks - 정규함수에서는 Hooks 사용x -> 사용자 정의 훅 사용 - hooks - use-counter.js - use로 시작할 것 EX01) import { useState, useEffect } from "react"; const useCounter = (forwards = true) => { const [counter, setCounter] = useState(0); useEffect(() => { const interval = setInterval(() => { if (forwards) { setCounter((prevCounter) => prevCounter + 1); } else { setCounter((prevCounter) => prevCounter - 1); } },..
-
react ( Udemy강의 ) - 5. DB연결ReactJS 2022. 4. 28. 17:30
* 브라우저에서 실행되는 모든 자바스크립트 코드는 브라우저뿐만 아니라 웹사이트의 사용자들도 접근하고 읽을 수 있다! 참고 자료 : https://academind.com/tutorials/hide-javascript-code API : Application Programming Interface URL에 요청을 전송하게 되면 특정한 형식에 맞춰서 데이터를 전달 참고자료 : https://academind.com/tutorials/rest-vs-graphql axios : 어떤 자바스크립트 라이브러리를 사용하는가에 관계없이 HTTP 요청 전송, 라이브러리없이 사용O Fetch : 최근에는 자바스크립트 내에서 HTTP 요청을 전송하는 내장 매커니즘 존재, 브라우저 내장형 API를 통해 HTTP 요청을 전송하..
-
react ( Udemy강의 ) - 4. React 최적화ReactJS 2022. 4. 28. 11:29
React - Behind the Scenes How React Works 리엑트는 state, props, context가 변한 컴포넌트와 자식 컴포넌트를 리랜더링 시킨다. 클로저에 관한 공식문서 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures React.memo : 어떤 props가 입력되는지 확인하고 입력되는 모든 props의 신규값을 확인한 뒤 이를 기존의 props의 값과 비교하도록 리액트에게 전달, 그리고 props의 값이 바뀐 경우에만 컴포넌트를 재실행 및 재평가 export default React.memo(DemoOutput); useCallback 훅 : 기본적으로 컴포넌트 실행 전반에 걸쳐 함수를 저장할 수 있게 ..
-
react - 아코디언 메뉴ReactJS 2022. 4. 25. 15:20
첫번째 컴포넌트 ( 부모 ) const EX02 = () => { const [activeIndex, setActiveIndex] = useState(''); return( {faq.map((data, index) => ( ))} ); } 두번째 컴포넌트 ( 자식 ) const Faq = ({title, content, activeIndex, setActiveIndex}) => { return( {content.map((data) => ( ))} ); } 세번째 컴포넌트 ( 자식의 자식 ) const FaqList = ({ data, idx, activeIndex, setActiveIndex }) => { const [clickedIdx, setClickedIdx] = useState(0); // 1단 ..
-
react ( Udemy강의 ) - 3. Effects, Reducers & ContextReactJS 2022. 4. 20. 11:11
Advanced, yet super-important Features! 1. Effect ( Side Effect ) - 애플리케이션에서 일어나는 다른 모든 것들 EX) http 리퀘스트에 대한 응답 / 브라우저 저장소에 무언가를 저장 / 타이머나 간격을 설정 - 사이드이펙트( : 응답으로 실행되는 액션 )를 처리하기 위해 존재 useEffect( () => { }, [dependencies] ); 첫번째 인자 : 함수 - 모든 컴포넌트 평가 후에 실행되어야하는 함수 두번째 인자 : 의존성 지정 - 의존성으로 구성된 배열 구성요소( 또는 일부 상위 구성 요소 )가 다시 렌더링 되어 이러한 "것들"(의존성요소)이 변경될 수 있는 경우 ex_01) 유효성 검사시 활용 useEffect(() => { setF..
-
react ( Udemy강의 ) - 2. Fragments, Portals & Refs ( Toolbox )ReactJS 2022. 4. 20. 11:05
1. Fragments JSX의 한계 1. 루트 JSX 요소는 1개 ( 자바스크립트에서는 둘 이상 반환 x ) return ( React.createElement('h2', {}, 'Hi there!') React.createElement('p', {}, 'This does not work :-(') ); // this also isn't valid JavaScript + 네이티브 자바스크립트 배열 사용! -> 리스트반환이므로 key가 필요 -> key작성 귀찮... * 리스트를 매핑 시 key를 원함 * + 불필요한 div 또는 기타 요소가 많이 존재 해결방안 - Fragment의 원리! // Wrapper 컴포넌트 사용 const Wrapper = props => { return props.child..
-
react ( Udemy강의 ) - 1. Component, CSSReactJS 2022. 4. 12. 16:40
VScode 자동정렬 1. prettier 설치 2. settings - editor:default Formatter - prettier-vscode 설정 3. keyboard shrotcuts - format document - shift+alt+f react에서 줄바꿈하는 방법! : https://facerain.club/react-newline/ * 리엑트에서 \n 적용하기 위해서는 css에 white-space : pre-line; 추가 할 것! ( \n 와 ``에서의 줄바꿈 둘 다 적용! ) 1. 비 저장 컴포넌트 ( 상태 비저장 컴포넌트, 프레젠테이션 컴포넌트, dumb 컴포넌트 ) 내부 상태가 아예 없고 데이터를 출력하기 위해서만 거기 존재하기 때문 2. 저장 컴포넌트 ( 상태 저장 컴포넌트..