Profiler로 리렌더링 최적화 판단하기

기준 측정

Profiler로 느린 상호작용의 commit 시간과 리렌더링 컴포넌트를 기록합니다.

baseline

props 변경, state 위치, context 확산, 비싼 계산 중 무엇이 원인인지 나눕니다.

cause

state를 좁히거나 컴포넌트 경계를 나눠 불필요한 렌더 범위를 줄입니다.

경계

참조 안정성이 필요한 곳에 memo, useMemo, useCallback을 제한적으로 씁니다.

memo

적용 후 실제 commit 시간과 사용자 체감이 줄었는지 다시 봅니다.

verify

memo

같은 props면 렌더 생략 부모가 자주 렌더되지만 자식 props가 안정적인 경우에 효과가 있습니다.

비교 비용 확인

useMemo

비싼 계산 캐시 렌더마다 반복되는 정렬, 필터, 변환이 실제로 비쌀 때 사용합니다.

의존성 정확도

useCallback

함수 참조 안정화 memoized child나 effect 의존성에 넘기는 콜백이 자주 바뀔 때 의미가 있습니다.

남용 금지

측정 근거 적용 전후 Profiler 결과 없이 메모화를 늘리지 않습니다.

의존성 안전 오래된 클로저를 만들지 않도록 의존성 배열을 정확히 유지합니다.

구조 우선 메모화보다 state 위치와 context 범위를 줄이는 쪽이 더 큰 개선일 때가 많습니다.