React Developer Tools의 Profiler을 이용한 성능 측정을 해볼 예정이다.
React developer Tools Profiler
React developer Tools Profiler란?
React 컴포넌트의 렌더링 성능을 측정하고 시각화한다.
애플리케이션의 병목 현상을 식별하는 데 도움을 준다.
우선, React Developer Tools를 설치해야한다.
설치 링크
그 다음, React를 실행한 후 개발자 도구를 열고 Profiler를 선택한다.
Profile 탭에서 녹화 버튼을 클릭하면 프로파일링이 시작된다.
페이지의 특정 버튼을 클릭하거나 스크롤하는 등의 작업을 수행하면된다.
작업이 끝나면 다시 녹화 버튼을 눌러 중지하면된다.
프로파일링이 완료되면 결과를 분석해주는데
주요 지표는 다음과 같다
- Render 시간: 각 컴포넌트의 렌더링에 걸린 시간
- Commit 시간: DOM 업데이트에 걸린 시간
- 컴포넌트 트리: 렌더링된 컴포넌트의 계층 구조
- Fiber 트리: React의 내부 렌더링 구조
사용해보기
최적화된 컴포넌트와 되지 않은 컴포넌트를 비교해 보도록 하겠다.
- 코드
이런식으로 작성해보았다
count up 버튼을 클릭 하면 컴포넌트들이 리랜더되는걸 살펴보면된다.
살펴보기
좌측이 최적화 되지않은 컴포넌트이다.
count가 변경될 때마다 불필요한 리랜더링이 일어나는 모습을 볼 수 있다.
반면, 우측의 최적화된 리스트는 count의 상태가 변해도 리랜더가 일어나지 않는 모습이다.
마무리
이로써, React Developer tools의 Profiler를 사용하여 최적화된 컴포넌트와 최적화되지 않은 컴포넌트의 성능 차이를 확인해 보았다.
이 과정을 통해 알 수 있는 점은
1. 성능 최적화의 중요성:
최적화되지 않은 컴포넌트는 불필요한 리렌더링으로 인해 애플리케이션의 전반적인 성능을 저하시킬 수 있다.
2. React의 최적화 기법 효과:
useMemo, useCallback, React.memo 등의 최적화 기법을 적절히 사용하면 불필요한 리렌더링을 효과적으로 방지할 수 있다.
3. 성능 측정 도구의 유용성:
React Developer Tools의 Profiler는 성능 문제를 시각적으로 파악하고 분석하는 데 매우 유용하다.
4. 데이터 기반 최적화:
Profiler를 통해 얻은 데이터를 바탕으로 어떤 컴포넌트가 성능 병목을 일으키는지 파악하고 이를 개선할 수 있다.
