[React] React Developer Tools / React Profiler로 앱 성능 측정하기

React Developer Tools 확장 프로그램

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko 

React Developer Tools

React Developer Tools는 리액트 확장 프로그램으로, 리액트 앱의 컴포넌트 트리와 렌더링 과정을 한눈에 확인할 수 있는 'Component 탭'과 렌더링 성능을 측정할 수 있는 'Profiler 탭'을 제공합니다.

 

Components 탭에서 Highligh updates 부분을 체크해주면 쉽게 컴포넌트가 렌더링 되는 모습을 확인할 수 있습니다.

 

React Profiler 란

React Profilers는 React 16.5에서 새로운 DevTools 프로파일러 플러그인에 대한 지원을 추가합니다.

이 플러그인은 React의 Profiler API를 사용하여 React 애플리케이션의 성능 병목 현상을 식별하기 위해 렌더링되는 각 구성 요소에 대한 타이밍 정보를 수집 합니다.

 

실습

A와 B 컴포넌트를 같은 기능이지만 다르게 만들어서 Profiler로 성능을 비교해보도록 하겠습니다.

A : 모든 요소를 하나의 컴포넌트에 구현
B : 모든 요소를 여러 컴포넌트로 분리하여 구현

 

1) 가짜 데이터 Fetch 하기

성능을 측정하기 위해서는 어느 정도 많은 데이터가 있을 시에 측정이 가능하기에 가짜 데이터를 전달해주는 jsonplaceholder api server 에 요청을 보내서 가짜 데이터를 받아오겠습니다.

JSONPlaceholder 란 ? 🤔
- JSONPlaceholder는 가짜 데이터가 필요할 때마다 사용할 수 있는 무료 온라인 REST API입니다.
- posts, users, photos 등 여러 가지 가짜 데이터를 가져올 수 있습니다.

2) 성능 측정을 위한 앱 구성하기

App.js

App.js

• 데이터 Fetch
• 검색 기능
• 전체적인 레이아웃

A.js

• post 데이터 목록(post) 렌더링
• 검색 키워드(message) 렌더링
• 모든 요소를 하나의 컴포넌트에 구현

B.js

• post 데이터 목록(post) 렌더링
• 검색 키워드(message) 렌더링
• 모든 요소를 여러 컴포넌트로 분리하여 구현

3) React Profiler로 성능 측정하기

성능을 측정하기 위해 크롬 개발자 도구를 열고 Profiler 탭으로 이동하겠습니다. 여기서 프로파일링을 수행해서 성능 데이터를 기록하고 측정할 수 있습니다.

프로 파일링을 수행하려면 레코드 버튼을 클릭합니다.

Profiler는 컴포넌트가 리렌더링이 될 때마다 성능을 기록합니다.

1번째 "h"를 타이핑 해서 Re Rendering 했을 때

App Component : 5.2ms
A Component: 1.3ms
B Component: 3.7ms

 

A Component Rendering Time < B Component Rendering Time

 

위 처럼 여러 컴포넌트로 분리한 B 컴포넌트의 렌더링 성능이 더 좋지 않다는 것을 Profiler를 통해 측정할 수 있었습니다.

 

다음 포스팅에서는 React.memo를 사용하여 이러한 렌더링 성능을 최적화해보는 시간을 가져보겠습니다 :)