Components tab

예상과 다른 값은 위로 거슬러 올라간다

Components 탭은 현재 화면의 컴포넌트 트리와 props, state, hooks 값을 런타임 기준으로 확인하는 출발점입니다.

01 select

문제 컴포넌트 선택

화면에서 이상한 값을 보이는 컴포넌트를 트리에서 먼저 고릅니다.

02 inspect

props와 hooks 값이 코드에서 기대한 값과 같은지 대조합니다.

03 trace

값이 이미 틀렸다면 그 값을 전달한 부모 컴포넌트로 올라갑니다.

04 classify

props 드릴링, 상태 위치, 참조 재생성 중 어디에 가까운지 봅니다.

props 드릴링 누수

중간 컴포넌트가 쓰지 않는 값을 계속 전달합니다.

상태 위치 오류

작은 변화가 필요 이상으로 넓은 트리를 다시 그립니다.

참조 타입 재생성

객체와 함수 props가 렌더마다 새 참조로 바뀝니다.