06. 성능 최적화: 메모이제이션의 정공법
React
Performance
Memoization
측정 없는 최적화는 금물. 7가지 기법으로 진짜 병목을 타격하고 렌더링 비용을 정복하라.
메모이제이션(Memoization)의 본질: 불필요한 계산과 렌더링 비용 절감
무엇인가:
이전 계산 결과나 참조값을 저장해두고 입력이 같으면 재사용하는 최적화 기술. React.memo, useMemo, useCallback이 이 삼위일체를 이룬다.
왜 쓰는가: 리액트의 기본 리렌더링 특성으로 인한 불필요한 CPU 및 메모리 낭비를 줄이기 위해. 단, 메모이제이션 자체도 비용이므로, 측정 없는 최적화는 오히려 독이다.
언제 쓰는가: 연산이 무겁거나, 자식에게 넘기는 참조값이 변해 불필요한 리렌더링이 전파될 때. React Profiler로 병목을 확인한 후 적용하라.
1관문. Referential Integrity
매 렌더마다 새 참조가 생성되어 React.memo가 무력화되는 원인을 찾고 useCallback으로 해결하라.
2관문. React.memo with Comparator
기본 얕은 비교로 막지 못하는 불필요한 리렌더를 커스텀 비교 함수로 방어하라.
3관문. Virtualization (Windowing)
10만 개 아이템 리스트를 가상화하여 보이는 부분만 렌더링되도록 구현하라.
4관문. Expensive Computation
무거운 정렬/필터 연산을 useMemo로 감싸 불필요한 재계산을 방지하라.
5관문. Component Inversion
children prop 패턴으로 부모 리렌더가 자식에게 전파되지 않도록 컴포넌트 구조를 역전하라.
6관문. Profiler API
React Profiler API를 사용하여 컴포넌트 렌더 시간을 측정하고 병목을 찾아라.
7관문. Code Splitting
React.lazy와 Suspense로 무거운 컴포넌트를 분리하여 초기 번들 크기를 줄여라.