React에서 값과 함수의 메모이제이션은 어떻게 구분해서 적용하는가?

연산 결과를 재사용할 때는 값을 기억하고 자식 컴포넌트의 함수 참조를 유지할 때는 함수를 기억한다.

useMemo는 렌더링 시 비용이 큰 계산의 결과값을 기억한다. 대규모 배열 정렬이나 복잡한 객체 생성 시 계산 결과만 보존한다.

useCallback은 함수 객체의 참조를 유지한다. React.memo로 감싸진 하위 컴포넌트에 콜백을 전달할 때 불필요한 리렌더링을 차단한다.

모든 값과 함수에 메모이제이션을 붙이면 의존성 비교 비용이 추가된다. 단순 계산이나 메모화되지 않은 자식에게 전달하는 함수에는 최적화를 생략한다.