[React] 렌더링 성능 최적화하는 7가지 방법 (Hooks 기준)

오늘은 그동안 React를 공부하고 알아왔던, class기반이 아닌 hooks 기반의 성능 최적화에 대한 방법들을 포스팅 하고자 한다.먼저 컴포넌트의 리렌더링 되는 조건은 아래와 같다.부모에서 전달받은 props가 변경될때부모 컴포넌트가 리렌더링 될 때자신의 state

velog.io

React 개발 시 알아두면 좋은 성능 최적화 방법들을 설명하고 있음.🙂

1. useMemo
2. React.memo 컴포넌트 메모이제이션
3. useCallback
4. 자식 컴포넌트의 props로 객체를 넘겨줄 경우 변형하지말고 넘겨주기
5. 컴포넌트를 매핑할 때에는 key값으로 index를 사용하지 않는다.
6. useState의 함수형 업데이트
7. Input에 onChage 최적화