React DevTools 추적 순서

컴포넌트 찾기

화면에서 문제가 보이는 요소를 선택해 어떤 컴포넌트가 렌더링했는지 찾는다.

inspect

props, state, context 값을 부모 방향으로 따라가며 잘못된 데이터 원천을 찾는다.

데이터 흐름

Profiler로 사용자 동작을 녹화해 어떤 컴포넌트가 오래 렌더링되는지 확인한다.

profile

상태 위치 이동, memo, selector 적용 뒤 같은 동작을 다시 기록해 차이를 본다.

compare

값 오류

화면 값이 틀리면 Components 탭에서 props와 state를 먼저 본다. 렌더 최적화보다 데이터 소유자와 전달 경로가 중요하다.

debug data

느린 UI

클릭 뒤 버벅이면 Profiler에서 commit time과 render count를 본다. 큰 리스트, 비싼 계산, 불안정한 props가 후보다.

debug performance

Context

Context 변경이 넓은 트리를 다시 그리는지 확인한다. Provider 분리나 selector 기반 구독을 고려한다.

fan-out

재현 동작 어떤 클릭과 입력을 녹화했는지 기록한다.

전후 수치 commit time, render count가 개선 전후로 남아 있다.

원인 분리 네트워크 지연을 렌더 문제로 착각하지 않는다.

wrong value -> Components
slow interaction -> Profiler
slow request -> browser Network