🚀 프론트엔드 성능 개선 가이드 #1. React DevTools 컴포넌트 & 프로파일러 기능 활용

왜 이걸 써아함?

저는 평소에 웹 개발(프론트 개발)을 할때면 에러가 발생하거나 콘솔에다가 찍어 디버깅을 해볼때 개발자 도구에 많이 들어갑니다.

개발자 도구에서 여러 DOM 요소를 관찰해서 스타일링 할때 참고한다거나 등등 하는데 생각보다 그렇게 편리하게 모든 것이 다 보이진 않았습니다. 

 

프론트엔드 개발 시 성능 이슈를 빠르게 찾아내는 것은 최적화를 위한 필수 단계입니다. Chrome React Developer Tools는 React 컴포넌트 트리와 렌더링 동작을 시각화해 성능 병목을 손쉽게 파악할 수 있는 강력한 도구입니다. 이번 포스팅에서는 React DevTools의 컴포넌트 및 프로파일러 기능을 활용해 성능 문제를 분석하고 최적화하는 방법을 다룹니다.

 

1. React Developer Tools 설치 및 활성화

 

먼저 Chrome 브라우저에 React Developer Tools를 설치해야 합니다.

 

설치 방법:

1. Chrome 웹 스토어에서 React Developer Tools를 검색해 설치합니다.

2. React 애플리케이션 페이지를 열고 개발자 도구 (F12) → Components, Profiler 탭이 보이는지 확인합니다.

 

위에도 강조했듯, 개발자도구에서 많은 동작을 하는 프론트엔드 입장에선 개발자 도구의 성능을 올려야합니다.

먼저 새로 추가된 Components 탭  관련 내용을 소개하겠습니다.

 

 

2. Components 탭 기능과 사용법

🔍 역할

 

Components 탭은 애플리케이션의 컴포넌트 구조와 상태/props/DOM 렌더링 상태를 시각적으로 확인할 수 있도록 돕습니다. 이를 통해 특정 컴포넌트가 올바르게 업데이트되고 있는지 확인할 수 있습니다.

 

✨ 주요 기능

• 컴포넌트 트리 확인: React 컴포넌트의 계층 구조를 시각적으로 탐색할 수 있습니다.

• Props와 State 확인: 선택한 컴포넌트의 props와 state 값을 실시간으로 확인할 수 있습니다.

• 리렌더링 시각화: 컴포넌트가 리렌더링되었을 때 하이라이트 색상으로 표시되므로 불필요한 렌더링을 시각적으로 파악할 수 있습니다.

 

🛠️ 사용 방법

1. Components 탭을 클릭합니다.

2. 트리 구조에서 특정 컴포넌트를 선택하면 해당 컴포넌트의 props, state 정보가 우측 패널에 표시됩니다.

3. 하이라이트 업데이트 기능을 활성화하면 리렌더링될 때마다 해당 컴포넌트가 깜빡이며 업데이트가 이루어졌음을 알립니다.

 

🔧 성능 개선 팁:

• 컴포넌트가 불필요하게 리렌더링되는 경우 React.memo로 최적화합니다. 

• 렌더링에 사용되는 props와 state가 변화하지 않았는지 확인하여 useMemo, useCallback으로 불필요한 연산을 방지합니다.

 

 

🧑🏻‍💻필자가 드리는 충고..

useMemo, useCallback은 상위에서 state 변경으로 인해 하위 state가 바뀌었을때, 싹 다 렌더링이 되기 때문에 거기에 비롯된 불이익을 방지하려 하는 Hook입니다. 그러나, 모든 컴포넌트에 이 훅들을 적용하면 불필요하게 메모리가 많이 잡아먹어 성능이 안좋아 질 수 있습니다.

 

 

3. Profiler 탭 기능과 사용법

 

🔍 역할

 

Profiler 탭은 애플리케이션 렌더링이 발생할 때 시간 소요, 렌더링 빈도, 렌더링된 컴포넌트를 시각적으로 분석할 수 있습니다. 이를 통해 애플리케이션의 성능 병목 지점을 찾고 최적화할 수 있습니다.

 

✨ 주요 기능

• Render Time: 컴포넌트 렌더링에 걸린 시간을 색상으로 시각화해줍니다.

• 초록색: 빠른 렌더링

• 노란색: 보통 속도

• 빨간색: 성능 저하 가능성

• Commit Tree: 각 렌더링 단계에서 어떤 컴포넌트가 얼마나 자주 렌더링되었는지 시각적으로 확인할 수 있습니다.

• Flamegraph & Ranked Chart: 어떤 컴포넌트가 가장 많은 리소스를 사용했는지 시각화된 그래프로 보여줍니다.

 

🛠️ 사용 방법

1. Profiler 탭을 클릭합니다.

2. 오른쪽 상단의 Record 버튼을 눌러 녹화를 시작합니다.

3. 페이지 상에서 동작(버튼 클릭, 페이지 전환 등)을 실행합니다.

4. 다시 Stop 버튼을 눌러 녹화를 종료하면, 렌더링 기록이 표시됩니다.

 

이렇게 말하면 뭐라는지 모르니 예시를 하나 들어보겠습니다.

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount((prev) => prev + 1);
  };

  return (
    <div>
      <ExpensiveComponent />
      <button onClick={handleClick}>Click Me! {count}</button>
    </div>
  );
}

function ExpensiveComponent() {
  console.log("Expensive component rendering...");
  let sum = 0;
  for (let i = 0; i < 1000000000; i++) {
    sum += i;
  }
  return <div>Expensive calculation done!</div>;
}

위 코드에서 ExpensiveComponent는 버튼 클릭 시 매번 렌더링(하위컴포넌트의 자동 렌더링)되며 성능을 저하시키는 문제를 유발합니다. Profiler를 통해 해당 컴포넌트가 클릭 시 불필요하게 렌더링되는 것을 확인할 수 있습니다

 

4. Profiler 그래프 해석과 최적화

• Flamegraph: 컴포넌트 계층 구조와 렌더링 시간을 시각적으로 나타낸 그래프입니다. 길이가 길수록 해당 컴포넌트의 렌더링이 오래 걸렸음을 의미합니다.

• Ranked Graph: 렌더링 시간별로 컴포넌트를 정렬해 병목 지점을 빠르게 확인할 수 있습니다.

 

 

5. React 성능 최적화 팁

• React.memo: props가 변경되지 않으면 컴포넌트를 리렌더링하지 않습니다.

• useMemo / useCallback: 연산량이 큰 함수나 복잡한 데이터 계산을 캐싱하여 불필요한 연산 방지.

• 코드 스플리팅: React.lazy와 Suspense를 사용하여 페이지 로딩 시 초기 렌더링을 최적화합니다.

• 불필요한 상태 제거: 필요하지 않은 상태는 최대한 제거하여 리렌더링 범위를 줄입니다.

 

 

💡 마무리

 

Chrome React Developer Tools의 Components와 Profiler는 React 프로젝트에서 렌더링 최적화와 성능 병목 해결에 매우 유용합니다. 성능 문제는 발견이 어려울 수 있지만, 이러한 도구들을 사용하면 코드 구조를 개선하고 쾌적한 사용자 경험을 제공할 수 있습니다.