<aside> 💡 리액트로 만들어진 앱의 경우에 사용할 수 있다. 리액트 프로파일러를 이용해 컴포넌트별 렌더링 시간을 파악할 수 있고, 사용자의 인터렉션에 대한 변화를 추적할 수 있다.

</aside>

1. React Developer Tools 익스텐션 설치하기

크롬 브라우저에서 Profiler 기능을 이용하기 위해서 React Developer Tools 익스텐션을 설치한다.

• 설치하러 가기: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko

2. Commit

2-1) Commit 개요

React에서 한 번의 커밋(Commit) 은 아래와 같은 과정을 거쳐 DOM에 최종 반영되는 순간을 말한다.

1. React가 상태 변경, props 변경 등으로 인해 재조정(Reconciliation) 과정을 거쳐 변경사항을 계산한다.
2. 계산된 변경사항을 DOM에 한꺼번에 반영하는 시점을 “Commit”이라고 부른다.

Profiler의 “Commit information”은 이 커밋이 일어난 시점에서, 어떤 컴포넌트가 실제로 렌더링 되었고, 그 렌더링에 걸린 시간이 얼마였는지를 추적하여 제공한다.

2-2) Commit 정보 패널 구성

Profiler 탭에서 특정 커밋을 선택하면, 일반적으로 오른쪽 패널(또는 상단 영역)에 다음과 같은 Commit information이 표시된다.

1. Commit # (Commit 순번)
   • “Commit 2 of 5”와 같이, 전체 프로파일링 세션 중 몇 번째 커밋인지를 나타낸다.
2. Actual duration / Commit duration
   • 해당 커밋 전체가 완료되는 데 걸린 실제 시간을 보여준다.
   • 예: “3.4ms”
   • 이 값이 높을수록 해당 커밋이 많은 컴포넌트를 렌더링했거나, 복잡한 연산이 포함되었음을 의미한다.