Profiler 결과 개선 루프

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

1

시나리오 고정

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

2

커밋 비용 확인

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

3

원인 분리

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

4

재측정

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

Profiler에서 보는 신호

긴 commit

한 번의 상호작용이 넓은 트리를 다시 그리는지 확인합니다. · 반복 렌더 · 입력 한 번에 동일 컴포넌트가 여러 번 렌더링되는지 봅니다.…

핵심Profiler 결과 개선 루프은 각 요소의 관계와 선택 조건을 함께 읽어야 한다.