1. React 초급
1.1 환경설정
- Node를 설치하면 npm(node package manager)이 자동 설치됨
- npm이 설치되면 npx(node package runner)도 자동으로 설치됨
- npx create-react-app 프로젝트 이름 하면 프로젝트가 생성됨
1.2 공식문서
1.3 버블링과 캡처링
- 버블링 : 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하는 원리
- 캡처링 : 버블링의 반대 개념. 부모에서 자식으로 동작
- 캡처링 후에 버블링이 일어남
1.4 조건부 랜더링
- if : ex) if(조건){ return A } else{ return B}
- && : ex) 조건 && A --> 조건이 true라면 A까지 출력
- falsy 주의...! 0은 falsy
- 삼항 연산자 : condition ? A : B
- 아예 안그리고 싶은 경우 : return null
1.5 List
- key는 고유성을 구분하기 위해서 사용하기 때문에 값이 넘어가지는 않음
- 리스트 항목에 명시적으로 key를 지정하지 않으면 기본적으로 인덱스를 key로 사용하지만 warning은 뜸
1.6 Hook
1.6.1 Hook 사용 규칙
- 최상위에서만 Hook을 호출(반복문, 조건문, 중첩된 함수 내 X)
- Functional Component와 custom Hook 내에서만 호출
1.6.2 Effect Hook
- useEffect(() => {}) : componentDidMount + componentDidUpdate + componentWillUnmount 가 합쳐진 것
// 처음 시작할때와 cnt가 변경될때 실행됨
useEffect(() => {
console.log("i run when 'cnt' changes", cnt);
// 컴포넌트 해제 시 호출 : cleanup function
return () => console.log("destroyed");
}, [cnt]);
- Effect가 업데이트 마다 실행되는 이유?
표현을 합치고 버그를 방지하기 위해
- useLayoutEffect : useEffect와 유사 모든 DOM 변경 후 브라우저가 화면을 그리기 이전 시점에 동기적으로 수행
2. React 고급
2.1 메모이제이션
- 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거
// 상태가 바뀌지 않을때 re-render되는 것을 막음
const MemorizedBtn = React.memo(Btn2);
- useMemo : 어떤값을 리턴하는 함수. 특정한 값을 memoization 할 때 사용
- useCallback : 특정함수를 memoization할 때 사용
2.2 Portals
- DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공
2.3 Render Props
- 컴포넌트 간에 코드를 공유하기 위해 함수 props를 이용하는 간단한 테크닉
2.4 PropTypes
- Props의 타입을 확인하기 위한 도구
(Flow, TypeScript같은 정적 타이핑 도구)
- 개발 모드에서만 동작
- children 제한 가능
- .defaultProps : 기본 props 설정
PropComponent.propTypes = {
name: PropTypes.string,
age: PropTypes.nember.isRequired, // 필수값
}
2.5 Reconciliation(재조정)
- UI 갱신에 대한 React 접근법
- Virtual DOM : 가상의 표현을 메모리에 저장하고 실제 DOM과 동기화하는 과정 === 재조정
- Desing Principles : 리액트가 무엇을 하고 무엇을 하지 않는지에 대한 개발 철학
- 리액트의 스케쥴링 업데이트(setState가 비동기적인 이유)
...🥲
