Render Performance

대규모 리스트 최적화 루프

리스트 최적화는 무작정 memo를 붙이는 작업이 아니라 측정, 원인 분리, 렌더 범위 축소, 재측정을 반복하는 과정입니다.

Measure렌더 비용 측정
Isolate원인 컴포넌트 분리
Reduce불필요 렌더 차단
Verify전후 비교
01

React.memo

props가 같은 아이템의 재렌더를 막아 리스트 비용을 줄입니다.

02

useMemo

필터링과 정렬처럼 계산 비용이 큰 파생 값을 캐싱합니다.

03

useCallback

자식에게 전달되는 핸들러 참조가 매번 바뀌는 문제를 줄입니다.

04

Virtualization

수천 개 이상 목록은 화면에 보이는 항목만 렌더링합니다.

주의할 점

  • memo 자체도 비교 비용이 있으므로 측정 없이 남발하지 않습니다.
  • key는 안정적인 ID를 사용해 항목 재사용을 돕습니다.
  • 필터 입력은 debounce나 transition으로 사용자 입력 체감을 보호합니다.

도구 선택

Profiler측정
memo렌더 차단
useMemo계산 캐시
windowingDOM 축소