Components Profiler

React DevTools 진단 루틴

React Developer Tools는 컴포넌트 트리에서 상태 흐름을 보고, Profiler에서 렌더링 비용을 측정해 성능 문제를 좁히는 도구입니다.

Select컴포넌트 선택
Inspectprops/state 확인
RecordProfiler 측정
Compare변경 전후 비교
01

Components 탭

컴포넌트 계층, props, state를 확인해 데이터 흐름을 추적합니다.

02

상태 흐름

어떤 부모 상태가 어떤 자식 렌더링에 영향을 주는지 봅니다.

03

Profiler 탭

렌더링 시간과 커밋 횟수로 비용이 큰 컴포넌트를 찾습니다.

04

오진 방지

개발 모드와 StrictMode로 렌더링이 더 보일 수 있음을 감안합니다.

분석 기준

  • 느린 화면을 먼저 재현하고 같은 입력으로 반복 측정합니다.
  • 렌더링 횟수와 실제 사용자 체감 지연을 함께 봅니다.
  • memo나 useMemo 적용 전후를 Profiler로 비교합니다.

탭 역할

Components구조
Profiler비용
Props입력
State상태