리엑트 렌더링 최적화

리엑트 렌더링 최적화
: Props, Hooks, Context, Children .. 컴포넌트 재조정 방지, 참조 유지 등

1. 참조 유지하기 
: 하위 컴포넌트로 전달될 함수, ReactNode, Children
- 메모이제이션 : useMemo, useCallback
- 미적용시 하위 컴포넌트가 매번 새 콜백 함수의 참조를 받아 렌더링될 수 ㅣㅇㅆ다.
- 하위 컴포넌트 전달 목적 외 사용 불필요

2. 상태 비교 전략
: Redux - useSelector
- Shallow equal / Strict equality (===) 점검
- 리턴이 오브젝트인 경우 얕은 비교 필수 적용!!

3. Redux를 대체하는 다른 상태 관리 라이브러리 도입
- Recoil, Jotai, Zustand, 전파받는 상태 줄이기
- 관리할 상태가 많고, 복잡한 비지니스 로직 처리가 필요할 경우 도입 전 충분한 논의가 필요

4. PureComponent, React.memo
- Props 얕은 비교 적용하기
- 자주 업데이트 되는 컴포넌트에 적용 시 되려 성능 저하가 될 수 있다. 

 

5. useSelector shallowEqual 누락에 의한 무조건 렌더링 실행
- 리스트 렌더링 시 치명적이다.
- 각 원시 값 별로 useSelector를 따로 실행하거나, shallowEqual을 붙여준다.

6. input - onChange unmemoized callback 전달
- 다른 input의 상태가 변경될 때도 같이 렌더링 실행
- 보통의 경우 큰 성능 저하가 우려되지 않으나 방지하는 습관을 들이자

7. 과하게 늘어난 Redux 상태 트리
- 불필요한 UI 요소 관리를 겸하고 있을 수 있다.
- 팝업, 토스트, 토글 버튼 등의 전역 UI 상태는 Context, Atomic State등으로 분리한다.