React 리렌더링 최적화 판단

measure first

memo 계열 최적화는 적용보다 측정 판정이 먼저다

React.memo, useCallback, useMemo는 렌더를 줄일 수 있지만 비교와 캐싱 비용도 만든다. 같은 조건에서 전후를 비교해야 한다.

원칙

성능 문제가 보일 때만 최적화를 시도한다.

도구

Profiler, render count, actual duration, 입력 지연을 함께 본다.

주의

개발 모드 StrictMode 로그와 production 성능을 섞지 않는다.

기준 기록

같은 화면, 데이터, 사용자 동작으로 최적화 전 기록을 남긴다.

원인 분리

state, props, context 중 무엇이 하위 렌더를 퍼뜨렸는지 찾는다.

작게 적용

문제 경계에만 memo, callback, memoized value를 붙인다.

전후 판정

렌더 횟수와 duration이 함께 줄지 확인하고, 이득이 없으면 제거한다.

도구

줄이는 것

비용

사용 신호

React.memo

props가 같을 때 자식 렌더 호출을 줄인다.

얕은 비교 비용과 props 안정성 관리가 생긴다.

무거운 자식이 같은 props로 자주 다시 호출될 때

useCallback

함수 props의 참조가 매 렌더마다 바뀌는 일을 줄인다.

deps 관리와 클로저 이해가 필요하다.

memo 자식에게 이벤트 핸들러를 넘길 때

useMemo

비싼 계산 결과나 객체·배열 참조 재생성을 줄인다.

캐시 유지와 무효화 비용이 생긴다.

필터링, 정렬, 파생 데이터가 반복 계산될 때

유지

같은 조건에서 렌더 횟수와 실제 시간이 줄고 코드 추적 비용이 낮을 때 유지한다.

제거

비교 비용, deps 관리, 설명 비용이 성능 이득보다 크면 제거한다.

보류

개발 모드 로그만 보고 판단하지 말고 production에 가까운 조건에서 다시 측정한다.