트리 읽기
Components 탭에서 실제 화면 조각이 어떤 컴포넌트 계층으로 렌더링되는지 확인합니다.
React DevTools 진단 기준
Components 탭과 Profiler를 컴포넌트 구조, 상태 위치, 렌더 비용을 확인하는 한 세트로 연결합니다.
상태 위치
props와 state 값을 따라가며 어느 컴포넌트가 데이터를 소유하고 전달하는지 좁힙니다.
렌더 비용
Profiler 기록으로 렌더 시간이 큰 컴포넌트와 사용자 동작이 만든 갱신 범위를 비교합니다.
props가 매번 새 객체나 함수로 전달되는지 확인해 memo 적용 전 원인을 먼저 찾습니다.
측정은 사용자 흐름을 녹화한 뒤 commit 시간과 렌더 횟수를 함께 읽습니다.
왜 렌더됐는지 설명할 수 있어야 최적화가 코드 복잡도보다 큰 이득을 내는지 판단합니다.