렌더링 비용 예산

최적화는 리렌더 원인을 좁힌 뒤 적용한다

React 성능 도구는 증상에 맞춰 써야 효과가 있고, 타입은 의존성 계약을 흐트러지지 않게 지킵니다.

Props 안정화

React.memo

같은 props로 반복 렌더되는 순수 컴포넌트에 사용합니다.

계산 비용

useMemo

큰 목록 필터링처럼 결과 계산이 무거운 경우에 캐시합니다.

함수 참조

useCallback

자식에게 전달되는 핸들러 참조를 안정적으로 유지합니다.

1. 측정렌더 빈도 확인
2. 원인props와 state 추적
3. 적용가장 작은 도구 선택
4. 재측정개선 여부 확인