React 성능 튜닝 체크리스트: Profiler로 re-render 원인 찾고 memo 남용 피하기

React 성능 튜닝 체크리스트: Profiler로 re-render 원인 찾고 memo 남용 피하기

React 성능 튜닝에서 가장 중요한 건 최적화가 아니라 '원인 찾기'입니다. 이 글은 Profiler로 병목을 확인하고, 상태 위치/props 안정화/가상화 같은 효과 있는 수단만 적용하는 체크리스트를 제공합니다.

성능 튜닝은 증거 기반으로 해야 회귀를 줄입니다.

옵션/핵심 요소(3~6개)

항목	의미	언제 쓰는지(실무 상황)
React Profiler	렌더 비용 측정	병목 컴포넌트를 증거로 찾을 때
상태 위치	리렌더 범위 결정	상태가 상위면 트리 전체가 흔들림
memo/useMemo/useCallback	참조 안정화	효과가 있을 때만 제한적으로 사용
리스트 가상화	DOM 수 감소	수백~수천 행 리스트에서 필수
파생 상태 제거	불필요 계산 감소	derived state는 버그/비용을 키움

예시 코드(개념)

// Bad: 함수 props가 매번 새로 만들어져 자식 최적화가 깨짐
function Page() {
  return <List onSelect={(id) => console.log(id)} />
}

// Good: 필요할 때만 안정화
const onSelect = useCallback((id) => console.log(id), [])

문제 상황(정확히 1개)

상황: 검색 입력을 한 글자 칠 때마다 페이지가 버벅인다

원인: 입력 상태가 최상단에 있어 무거운 컴포넌트까지 함께 리렌더되고, 리스트/차트가 매번 다시 그려진다

해결: 상태를 필요한 범위로 내리고 컴포넌트를 분리한 뒤, Profiler로 병목을 확인하고 memo/가상화로 비용을 줄인다

예방 팁: 입력처럼 자주 바뀌는 상태는 리렌더 경계를 먼저 설계하고, 무거운 UI는 경계를 분리한다

참고/출처

• React Docs: Profiler
• React Docs: memo