Render Budget

Next/React 메모이제이션 판단 흐름

메모이제이션은 항상 이득이 아니라 렌더 빈도와 계산 비용이 클 때만 효과가 난다.

언제 어떤 도구를 쓸까

profile first

Measure

Profiler로 실제 리렌더링 비용을 먼저 확인한다.

React.memo

props가 자주 같고 자식 렌더가 비쌀 때 쓴다.

useMemo

계산 결과가 비싸고 의존성이 안정적일 때 캐시한다.

useCallback

함수 참조가 자식 memo를 깨뜨릴 때 안정화한다.

Deps

의존성 배열이 틀리면 오래된 값이나 잦은 무효화가 생긴다.

Overhead

비교와 캐시 비용이 더 크면 제거하는 편이 낫다.

측정렌더 원인도구 선택재측정
읽는 법

메모이제이션은 습관이 아니라 성능 처방이다. 적용 전후를 같은 조건에서 재야 효과가 보인다.