React Developer Tools 분석 루틴

최적화는 감으로 시작하지 않고 컴포넌트 트리, 값 흐름, 렌더링 비용을 같은 시나리오로 확인한다.

1

Components

부모-자식 구조와 props, state, hooks 값을 확인한다.

2

Profiler

사용자 동작 한 번에 어떤 컴포넌트가 얼마나 렌더링됐는지 본다.

3

Compare

수정 전후를 같은 동작으로 다시 측정해 효과를 확인한다.

핵심React Developer Tools 분석 루틴은 각 요소의 관계와 선택 조건을 함께 읽어야 한다.