Profiler 개선 루프

측정값을 실제 개선 액션으로 바꾸는 루틴

DevTools에서 느린 커밋을 찾은 뒤 원인을 좁히고, 수정 전후를 같은 사용자 시나리오로 비교합니다.

1

시나리오 고정

검색, 필터, 모달처럼 사용자가 체감한 동작을 하나로 고정합니다.

2

커밋 비용 확인

가장 긴 commit과 자주 반복되는 렌더링을 먼저 봅니다.

3

원인 분리

props 재생성, 상태 위치, memo 누락 중 실제 원인을 좁힙니다.

4

재측정

수정 후 같은 입력 순서로 다시 측정해 수치 변화를 확인합니다.

Profiler에서 보는 신호

긴 commit

한 번의 상호작용이 넓은 트리를 다시 그리는지 확인합니다.

반복 렌더

입력 한 번에 동일 컴포넌트가 여러 번 렌더링되는지 봅니다.

효과 확인

최적화 후 같은 시나리오에서 commit duration이 줄었는지 봅니다.

수정 후보

상태 위치 축소 상위 상태가 너무 넓은 하위 트리를 흔들 때 적용
참조 안정화 객체/함수 props가 매번 새로 만들어질 때 적용
분할 렌더링 비싼 영역과 자주 변하는 영역을 분리
memo는 검증 후 실제 병목이 확인된 컴포넌트에만 적용