DEVTOOLS ROUTINE

React Developer Tools는 구조 확인과 비용 측정을 분리해서 본다

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

Components

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

Profiler

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

Compare

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

분석 기준: 렌더링 횟수와 시간이 실제 병목으로 확인된 컴포넌트부터 손댄다.