[React] 성능 분석과 최적화 도구로 앱 속도 대폭 향상시키는 법 🕵️‍♀️

React 애플리케이션의 성능을 최적화하면 사용자 경험이 눈에 띄게 향상됩니다! 이번에는 React에서 제공하는 성능 분석 도구와 최적화 방법들을 발랄하게 소개할게요. 준비되셨나요? 😎

---

반응형

1. React Profiler란? 🕵️‍♀️

React Profiler는 컴포넌트의 렌더링 빈도와 시간을 분석해 성능 병목을 찾아주는 도구입니다. "이 컴포넌트 진짜 필요할 때만 렌더링되고 있는 거 맞아?" 같은 고민을 해결해 줍니다.

Profiler 사용법 따라 해보기 🖱️

1. React Developer Tools 설치하기: Chrome 웹 스토어나 Firefox Add-ons에서 "React Developer Tools"를 검색해 설치하세요.
2. Profiler 탭 열기: 브라우저 개발자 도구에 "Profiler" 탭이 생겼다면 성공! 여기서 애플리케이션 성능을 기록하고 분석할 수 있어요.
3. 데이터 확인하기: 컴포넌트 트리, 렌더링 시간, 렌더링 원인 등을 시각적으로 확인할 수 있어요. 얼마나 렌더링이 비효율적인지 바로 알 수 있답니다.

---

2. Profiler 코드 직접 써보기 🔍

React Profiler 컴포넌트를 이용하면 특정 컴포넌트의 렌더링 정보를 코드로도 확인할 수 있어요.

예제: Profiler 활용하기

import React, { Profiler } from 'react';

const onRenderCallback = (
  id, // "ProfiledComponent"의 이름
  phase, // "mount" 또는 "update"
  actualDuration, // 렌더링에 걸린 시간
  baseDuration, // 메모이제이션 없이 걸렸을 시간
  startTime, // 렌더링 시작 시간
  commitTime, // DOM 업데이트 완료 시간
  interactions // 렌더링과 관련된 상호작용
) => {
  console.log({ id, phase, actualDuration });
};

const ProfiledComponent: React.FC = () => {
  return (
    <Profiler id="ProfiledComponent" onRender={onRenderCallback}>
      <div>Performance Analysis</div>
    </Profiler>
  );
};

export default ProfiledComponent;

여기서 포인트! 🧐

• Profiler: 분석 대상 컴포넌트를 감쌉니다.
• onRenderCallback: 렌더링 데이터가 콘솔에 출력됩니다.

---

3. 메모이제이션으로 렌더링 최적화하기 🧠

React에서는 메모이제이션을 활용해 불필요한 렌더링을 막고 성능을 끌어올릴 수 있습니다. 대표적으로 React.memo, useMemo, useCallback이 있죠.

React.memo로 컴포넌트 메모화하기

import React from 'react';

const ChildComponent = React.memo(({ value }: { value: number }) => {
  console.log('ChildComponent Rendered');
  return <div>Value: {value}</div>;
});

const ParentComponent: React.FC = () => {
  const [count, setCount] = React.useState(0);
  const [text, setText] = React.useState('');

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <ChildComponent value={count} />
    </div>
  );
};

export default ParentComponent;

어떻게 동작하나요?

• React.memo는 동일한 props가 전달되면 이전 결과를 재사용해 불필요한 렌더링을 방지합니다.
• 위 코드에서 text 입력값이 변해도 ChildComponent는 렌더링되지 않아요! 🔥

---

4. 성능 최적화 도구들 ✨

4.1 Web Vitals 🛠️

웹 퍼포먼스 지표를 측정하는 Google의 Web Vitals는 사용자 경험을 한 단계 끌어올리는 데 도움을 줍니다. LCP, FID, CLS 같은 성능 지표를 측정할 수 있어요.

설치 및 사용법:

npm install web-vitals

import { getCLS, getFID, getLCP } from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getLCP(console.log);

4.2 Lighthouse 💡

Lighthouse는 성능, 접근성, SEO 등을 종합적으로 평가해줍니다.

사용 방법:

1. Chrome 브라우저에서 개발자 도구를 엽니다.
2. "Lighthouse" 탭에서 분석 시작!

4.3 Code Splitting ⚡

필요한 코드만 로드하도록 분할하면 로딩 속도를 획기적으로 줄일 수 있어요.

React.lazy와 Suspense로 코드 분할하기:

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

const App: React.FC = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
};

export default App;

---

5. 마무리 🎉

React 애플리케이션의 성능을 분석하고 최적화하면 사용자 경험이 확 달라집니다! Profiler, 메모이제이션, Code Splitting 등 다양한 방법들을 시도해 보세요. 🚀

여러분의 앱이 더 빠르고, 더 효율적이고, 더 사랑받는 앱이 되길 응원합니다! 💪