2026년의 성능 튜닝 워크플로 짧음: React DevTools Profiler 열고, 느린 상호작용 녹화, 긴 row 찾고, 고침. 그 다음 DevTools 닫고 멈춤. 측정 안 한 거 최적화 마.
2-탭 워크플로
React DevTools 가 성능 탭 둘:
- Profiler — 시간 창 동안 React render 녹화. 어느 컴포넌트가 렌더했는지, 각각 얼마 걸렸는지, 왜 (state 변경, 부모 re-render, context 변경) 보여줌.
- Components — 어떤 컴포넌트의 현재 props/state/hook 검사. 성능 아니라 실제 render 출력 디버깅에 유용.
찾을 것
- 안 해야 할 때 렌더하는 컴포넌트 — prop 안 바뀌었는데 컴포넌트가 어쨌든 re-render. 부모 context 업데이트 또는 비-안정적 prop (memoize 안 된 콜백) 전달.
- 긴 render 시간 — 한 컴포넌트가 20ms+. Render 의 비싼 계산 또는 너무 많은 자식 렌더. useMemo / virtualization / React.memo + memoized prop.
- Cascading re-render — state 변경 하나가 render 트리 트리거. 트리에 너무 높이 둔 state (아래로 lift) 또는 value memoize 안 된 context 찾아.
Suspense 지시자
Profiler 가 컴포넌트가 언제 suspend 했고 resolve 에 얼마 걸렸는지 보여줘. 사용자에게 보이는 긴 suspension 이 가장 쉬운 승리 — 데이터 더 일찍 preload 또는 Suspense 경계 분할.
Concurrent-specific 디버깅
Profiler 의 'Why did this render?' 필드가 concurrent React 의 금. Render 가 긴급 (state 업데이트), transition (저우선순위), 초기 마운트 인지 알려줘. 의도 (transition) 와 실제 발생 (urgent) 의 mismatch 가 startTransition 래핑 빠졌다고 알려줌.
추측해서 최적화 마. 모든 memoization, 모든 transition, 모든 memo 래퍼가 작은 비용 추가. Profiler 가 앱 충분히 빠르다고 보여주면 더 최적화 필요 없음 — 다음 feature 출하 필요. 성능 작업은 측정된 문제 있을 때 보상.