상태와 props의 경로를 추적
확인 값
props, state, hooks
주요 질문
이 값은 어느 부모에서 만들어졌는가
값의 출처와 렌더 비용을 다른 탭에서 확인한다
Components 탭은 현재 값의 흐름을 추적하고, Profiler 탭은 같은 동작에서 실제로 소비된 렌더링 시간을 기록합니다.
상호작용의 렌더 비용을 측정
확인 값
commit 시간, 렌더 횟수, 느린 컴포넌트
주요 질문
이 렌더는 사용자가 체감할 만큼 비싼가
01 reproduce
동작 고정
입력, 클릭, 탭 전환처럼 재현 가능한 시나리오를 정합니다.
02 inspect
값 확인
Components 탭에서 예상과 다른 값을 먼저 찾습니다.
03 record
비용 기록
Profiler로 같은 동작을 기록해 비용이 큰 지점을 봅니다.
04 compare
전후 비교
수정 후 같은 시나리오로 다시 측정해 개선을 확인합니다.