React 앱 성능 최적화 2 - React Profiler로 성능 측정

 

React Profiler

 

React Developer Tools를 설치하고 react 앱을 실행시킨 뒤, 개발자 도구를 켜면 React Components와 React Profiler가 보인다.

 

 

React Profiler를 통해 컴포넌트 렌더링에 걸린 시간을 알 수 있다.

 

 

React Profiler 사용하기

 

React Profiler를 켜면 아래와 같은 화면이 뜨는데 왼쪽에 rec 버튼을 클릭하면 기록이 시작되고, 리액트 앱에서 렌더링이 발생하도록 앱과 상호작용해보자.

 

 

상단에 원이 rec 시작 버튼이고 클릭하면 profilling이 시작된다.

 

 

profilling이 시작되면 앱과 상호작용하고 다시 rec 버튼을 클릭해보면

 

 

렌더링하는데 소요된 시간이 ms 단위로 나타난다.

 

오른쪽 화면에 보면 Durations > Render : 5.4ms 로 렌더링 시간이 5.4ms 걸린것을 알 수 있다.