React 대규모 리스트 렌더링 최적화

필터링 계산, 아이템 컴포넌트, 클릭 핸들러가 부모 상태 변화에 함께 흔들리는지 Profiler로 확인한다.

1

Measure

Profiler에서 불필요 렌더링 위치를 찾는다.

2

Memo

프롭스가 안정적인 아이템 렌더링을 막는다.

3

Callback

아이템에 넘기는 함수 참조를 안정화한다.

4

Memoized Data

필터링된 배열 계산을 필요한 때만 수행한다.

핵심React 대규모 리스트 렌더링 최적화은 각 요소의 관계와 선택 조건을 함께 읽어야 한다.