TS · REACT PERF

React 리렌더링 최적화 선택 기준

React 성능 최적화는 무조건 memo를 붙이는 일이 아니라 어떤 비용이 반복되는지 보고 그 비용을 줄이는 도구를 고르는 일입니다.

최적화 선택 흐름

perf
React.memoprops가 같을 때 컴포넌트 렌더를 건너뜁니다.
useCallback자식에게 넘기는 함수 참조를 안정화합니다.
useMemo비싼 계산 결과를 의존성 기준으로 캐시합니다.
Virtualization긴 목록에서 보이는 항목만 렌더링합니다.
렌더 비용→참조 비용→계산 비용→목록 비용

React 리렌더링 최적화 선택 기준

measure
먼저 측정Profiler로 실제 병목을 확인한 뒤 적용합니다.
의존성 정확도useMemo와 useCallback은 deps가 틀리면 버그가 됩니다.
타입 안정성props와 callback 타입이 최적화 경계를 선명하게 만듭니다.
과최적화 금지작은 컴포넌트에 memo를 남발하면 가독성 비용이 커집니다.