Components와 Profiler 탭별 진단 루틴

컴포넌트 선택

화면에서 이상한 UI를 고르고 해당 컴포넌트의 props와 state를 확인한다.

inspect

값이 부모 props인지 context인지 내부 state인지 따라 올라간다.

trace

느린 동작을 녹화해 commit 시간과 많이 렌더링된 컴포넌트를 찾는다.

record

memo나 상태 이동 후 같은 동작을 다시 녹화해 비용이 줄었는지 본다.

compare

값 오류

화면 값이 틀리면 Components에서 props/state를 먼저 본다. 렌더 비용보다 데이터 소유자가 틀렸을 가능성이 높다.

data bug

느림

클릭 뒤 반응이 늦으면 Profiler에서 긴 commit을 찾는다. 큰 리스트, 비싼 계산, 불안정한 props가 후보가 된다.

render cost

Context

Context 값 변경이 넓은 하위 트리를 다시 그리는지 확인한다. provider 분리나 selector 패턴이 필요할 수 있다.

fan-out

재현 동작 어떤 클릭이나 입력을 기록했는지 남긴다.

전후 수치 commit time과 render count를 수정 전후로 비교한다.

원인 범위 성능 문제가 아닌 네트워크 지연을 렌더 문제로 착각하지 않는다.

Is the value wrong? -> Components
Is the UI slow? -> Profiler
Is the request slow? -> Network tab