React 렌더링 최적화

결론

React.memo로 컴포넌트의 결괏값을 메모이징할 수 있다.
useCallback으로 함수를 메모이징할 수 있다.
useMemo로 함수의 결괏값을 메모이징할 수 있다.

설명

useCallback, useMemo, React.memo는 모두 React의 렌더링 최적화와 관련된 Hook과 함수입니다.

React.memo는 props가 변할 때까지는 메모이징해 놓은 내용을 그대로 사용해 리렌더링을 막아 성능을 최적화합니다. (얕은 비교 진행)

useCallback과 useMemo는 각각 함수와 값을 메모이징합니다.
함수 컴포넌트는 렌더링될 때마다 컴포넌트 내부에 작성한 모든 코드를 실행하기 때문에 비용이 많이 드는 함수 생성이나 값의 연산이 있을 때 비효율적입니다.
비용이 많이 드는 함수와 값을 의존성 배열 안의 요소들이 변할 때까지는 메모이징해 놓아서 변경이 없을 때에는 이전 값을 그대로 사용하여 최적화합니다. (얕은 비교 진행)

물론 최적화도 비용이 드는 작업이므로 꼭 필요한지 잘 판단해서 사용해야 합니다.

추가 학습

컴포넌트가 리렌더링되는 상황

1. 자신이 전달받은 props가 변경될 때
2. 자신의 state가 바뀔 때
3. 부모 컴포넌트가 리렌더링될 때
4. forceUpdate 함수가 실행될 때