안동민 개발노트

"React 성능 최적화 기초"에서는 여러분의 리액트 애플리케이션을 더 빠르고 효율적으로 만드는 방법에 대해 다루겠습니다. 그 첫 번째 단계는 바로 "무엇이 문제인지 파악하는 것" 입니다. 이를 위해 필수적인 도구인 React Developer Tools의 사용법을 자세히 알아보겠습니다.

React Developer Tools란?

React Developer Tools는 Meta(구 Facebook)에서 공식적으로 제공하는 브라우저 확장 프로그램으로, 리액트 애플리케이션의 디버깅 및 성능 분석을 돕는 강력한 도구입니다. 이 도구를 사용하면 리액트 컴포넌트 트리를 탐색하고, 컴포넌트의 프롭스(props)와 상태(state)를 실시간으로 확인 및 수정하며, 리렌더링 성능을 분석하는 등의 작업을 수행할 수 있습니다.

설치 방법

React Developer Tools는 크롬(Chrome), 파이어폭스(Firefox), 엣지(Edge) 등 주요 브라우저의 확장 프로그램으로 제공됩니다.

Chrome 웹 스토어 (또는 Firefox Add-ons, Edge Add-ons)에 접속합니다.
"React Developer Tools"를 검색합니다.
확장 프로그램을 설치합니다.

설치 후, 리액트 애플리케이션이 실행 중인 페이지에서 브라우저 개발자 도구(F12 또는 Ctrl+Shift+I)를 열면 Components와 Profiler라는 두 개의 새로운 탭이 나타나는 것을 확인할 수 있습니다.

`Components` 탭

Components 탭은 리액트 애플리케이션의 현재 렌더링된 컴포넌트 트리를 시각적으로 보여줍니다. 마치 HTML DOM 트리처럼 컴포넌트들이 계층적으로 배열되어 있습니다.

컴포넌트 선택 및 검사

컴포넌트 트리 탐색: 왼쪽 패널에서 현재 페이지의 모든 리액트 컴포넌트를 계층 구조로 볼 수 있습니다. 원하는 컴포넌트를 클릭하여 선택합니다.
엘리먼트 검사기 사용: 브라우저 개발자 도구의 "요소(Elements)" 탭처럼, 리액트 개발자 도구에서도 화살표 아이콘(🔍)을 클릭한 후 페이지의 특정 UI 요소를 클릭하면 해당 UI를 렌더링하는 리액트 컴포넌트를 자동으로 선택해 줍니다.
오른쪽 패널 (Props, State, Hooks)
- 선택된 컴포넌트의 현재 프롭스(Props) 와 상태(State) 를 볼 수 있습니다.
- 함수형 컴포넌트의 경우 useState, useEffect, useContext 등 사용된 훅(Hooks) 의 값과 의존성 배열도 확인할 수 있습니다.
- 값들을 실시간으로 수정할 수도 있습니다! 값을 변경하면 해당 컴포넌트가 새로운 프롭스/상태로 리렌더링되는 것을 즉시 확인할 수 있습니다. 이는 디버깅 시 매우 유용합니다.

예시

여러분의 리액트 앱(예: App 컴포넌트 내에 Counter 컴포넌트가 있다고 가정)에서 Counter 컴포넌트를 선택하면, 오른쪽 패널에 count 상태와 initialValue 프롭스 등이 표시될 것입니다. 여기서 count 값을 직접 변경하면 UI가 바로 업데이트되는 것을 볼 수 있습니다.

컴포넌트 필터링 및 검색

검색 바: 컴포넌트 트리가 복잡할 경우, 상단의 검색 바를 이용하여 특정 컴포넌트 이름을 검색할 수 있습니다.
필터링 옵션
- "Hide components that are not updated by React": 리액트 컴포넌트가 아닌 일반 HTML 요소(DOM 노드)를 숨겨서 순수 리액트 컴포넌트만 볼 수 있습니다.
- "Highlight updates when components render.": 이 옵션을 켜면 컴포넌트가 리렌더링될 때 해당 컴포넌트 주위에 테두리가 잠깐 깜빡이며 강조 표시됩니다. 이는 불필요한 리렌더링을 시각적으로 빠르게 파악하는 데 매우 유용합니다.

`Profiler` 탭

Profiler 탭은 리액트 애플리케이션의 렌더링 성능을 측정하고 분석하는 데 사용됩니다. 어떤 컴포넌트가 얼마나 자주, 얼마나 오래 렌더링되는지 파악하여 성능 병목 지점을 찾을 수 있습니다.

프로파일링 시작 및 중지

녹화 시작: Profiler 탭을 열면 원형의 Record 버튼이 있습니다. 이 버튼을 클릭하여 프로파일링을 시작합니다.
앱 인터랙션: 프로파일링이 시작된 상태에서 애플리케이션과 상호작용합니다 (예: 버튼 클릭, 입력 필드 타이핑, 페이지 전환 등). 이 상호작용 동안 발생한 모든 리액트 렌더링 정보가 기록됩니다.
녹화 중지: Stop 버튼을 클릭하여 프로파일링을 중지합니다.

프로파일링 결과 분석

녹화가 중지되면 다양한 시각화된 데이터가 나타납니다.

렌더링된 커밋 목록 (좌측 상단)
- 각 막대는 하나의 "커밋(Commit)"을 나타냅니다. 커밋은 리액트가 변경사항을 DOM에 적용한 하나의 사이클을 의미합니다.
- 막대의 높이는 해당 커밋에 소요된 시간을 나타냅니다. 높을수록 오래 걸린 커밋입니다.
- 색상은 렌더링 시간에 따라 다릅니다 (초록색: 빠름, 노란색/빨간색: 느림).
- 가장 오래 걸린 커밋을 선택하여 분석을 시작하는 것이 좋습니다.
Flamegraph (불꽃 그래프)
- 선택된 커밋 내에서 렌더링된 컴포넌트들을 트리 형태로 보여줍니다.
- 각 박스는 하나의 컴포넌트를 나타냅니다.
- 너비: 해당 컴포넌트와 그 자식 컴포넌트들의 렌더링에 소요된 총 시간을 나타냅니다. 넓을수록 해당 렌더링 사이클에서 많은 시간을 소비한 컴포넌트입니다.
- 색상: 해당 컴포넌트의 "자체 렌더링 시간"을 나타냅니다. (초록색: 빠름, 노란색/빨간색: 느림).
- 비정상적으로 넓거나 붉은색인 컴포넌트를 찾아 성능 병목의 원인을 파악할 수 있습니다.
Ranked (랭크 그래프)
- 선택된 커밋 내에서 렌더링에 가장 많은 시간이 소요된 컴포넌트들을 내림차순으로 정렬하여 보여줍니다.
- Flamegraph와 유사하지만, 시간을 기준으로 컴포넌트의 중요도를 더 명확하게 파악할 수 있습니다.
Component Chart (컴포넌트 차트)
- 오른쪽 패널에서 특정 컴포넌트를 클릭하면, 이 컴포넌트가 모든 커밋에서 얼마나 자주 렌더링되었는지와 각 렌더링에 소요된 시간을 시각화하여 보여줍니다.
- 이 차트는 불필요하게 자주 리렌더링되는 컴포넌트를 식별하는 데 매우 유용합니다.
- Why did this render? 섹션을 통해 해당 컴포넌트가 왜 리렌더링되었는지 (프롭스 변경, 상태 변경 등)에 대한 자세한 정보를 얻을 수 있습니다.

일반적인 성능 문제 파악 팁

불필요한 리렌더링
- Highlight updates when components render. 옵션을 켜고 앱을 사용해 봅니다. 움직임이 없는데도 깜빡이는 컴포넌트가 있다면 불필요한 리렌더링이 발생하고 있는 것입니다.
- Profiler 탭에서 Component Chart를 확인했을 때, 특정 컴포넌트가 상호작용과 관련 없이 자주 렌더링되고 있다면 의심해봐야 합니다. Why did this render?를 통해 원인을 분석합니다.
느린 컴포넌트
- Flamegraph나 Ranked 차트에서 유난히 넓고 붉은색인 컴포넌트를 찾습니다. 이런 컴포넌트들은 렌더링 자체에 많은 시간을 소비하고 있을 가능성이 높습니다. 복잡한 계산이나 과도한 DOM 조작이 없는지 확인해야 합니다.
비효율적인 데이터 흐름
- 상위 컴포넌트의 작은 상태 변화가 불필요하게 많은 하위 컴포넌트들의 리렌더링을 유발하는 "리렌더링 폭포 현상"을 찾아야 합니다.

React Developer Tools 설정

개발자 도구 설정(톱니바퀴 아이콘)에서 React DevTools 관련 추가 설정을 할 수 있습니다. 예를 들어, Dark/Light 테마 변경, 기본 탭 설정 등이 가능합니다.

요약 및 다음 단계

React Developer Tools는 리액트 애플리케이션의 내부 동작을 이해하고 성능 문제를 진단하는 데 없어서는 안 될 도구입니다.

Components 탭: 컴포넌트 계층 구조, 프롭스, 상태, 훅 검사 및 실시간 수정.
Profiler 탭: 렌더링 성능 측정, 불필요한 리렌더링 및 느린 컴포넌트 식별.

이 도구들을 능숙하게 사용하는 것이 성능 최적화의 첫걸음입니다.

React Developer Tools 사용법