React Hooks
1. useState
: 리렌더링이 꼭 필요한 값을 다룰 때 쓰면 됨
2. useEffect
: React 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 hook
3. useRef
: 리렌더링을 발생시키지 않는 값을 저장할 때 사용한다.
(state는 변경되면 렌더링되고 ref는 변경돼도 렌더링 안됨)
ex) 특정 input이 focusing 되어야 한다면 사용
4. useContext
: current 속성 가진 객체를 반환한다. (인자로 넘어온 초기 값을 current 속성에 할당)
→ current 속성은 값을 변경해도 상태를 변경할 때처럼 React 컴포넌트가 다시 랜더링되지 않는다. React 컴포넌트가 다시 랜더링 되어도 current 속성 값이 유실되지 않는다.
리렌더링 발생 조건
1) 컴포넌트에서 state가 바뀌었을 때
2) 컴포넌트가 내려받은 props가 변경되었을 때
3) 부모 컴포넌트가 리렌더링 된 경우 자식 컴포넌트는 모두.
최적화
: React에서 리렌더링이 잦은 것은 좋은 것이 아님
(리렌더링 할 때 마다 자원이 소비되기 때문. 비용 발생)
→ 불필요한 렌더링이 발생하지 않도록 최적화 필요
대표적인 최적화 방법
- memo (React.memo) : 컴포넌트 캐싱
- useCallback : 함수 캐싱
- useMemo : 값 캐싱
