한국어

ReactJS 튜토리얼

Hooks

ReactJS 고급 기능

추가 개념

ReactJS - 프로파일러 API: 성능 최적화를 위한 초보자 가이드

안녕하세요, 미래의 React 마법사 여러분! 오늘 우리는 React의 Profiler API라는 마법의 세상으로 뛰어들어 볼 거예요. 프로그래밍에 새로운 사람이라면 걱정 마세요 - 이 여정에서 여러분의 친절한 안내자가 되어 step by step 설명해 드릴게요. 이 튜토리얼이 끝나면, 여러분은 프로처럼 React 애플리케이션을 최적화할 수 있을 거예요!

ReactJS - Profiler API

Profiler API는 무엇인가요?

코드로 들어가기 전에, Profiler API에 대해 이해해 보겠습니다. 케이크를 만들 때, 가장 오래 걸리는 단계가 뭔지 알고 싶다면 상상해 보세요. Profiler API는 React 컴포넌트의 시간 측정을 도와주는 스탑워치와 같은 역할을 합니다. 애플리케이션의 어떤 부분이 속도를 저하시키는지 식별하는 데 도움이 됩니다.

Profiler 컴포넌트

Profiler API의 핵심은 Profiler 컴포넌트입니다. 이 컴포넌트는 애플리케이션의 특정 부분을 측정하고자 하는 부분을 감싸는 특별한 컴포넌트입니다.

기본 사용법

간단한 예제로 시작해 보겠습니다:

import React, { Profiler } from 'react';

function MyApp() {
return (
<Profiler id="MyApp" onRender={onRenderCallback}>
<div>
<h1>환영합니다! 제 앱에!</h1>
<p>이것은 예제 애플리케이션입니다.</p>
</div>
</Profiler>
);
}

function onRenderCallback(
id, // 프로파일러 트리의 "id" 속성이 최근에 커밋된 경우
phase, // 컴포넌트가 최초로 마운트되었는지 (mount) 또는 다시 렌더링되었는지 (update)
actualDuration, // 커밋된 업데이트에 걸린 시간
baseDuration, // 메모리제이션 없이 전체 서브트리를 렌더링하는 데 예상되는 시간
startTime, // React가 이 업데이트를 렌더링하기 시작한 시간
commitTime, // React가 이 업데이트를 커밋한 시간
interactions // 이 업데이트에 속한 상호작용 세트
) {
// 로그를 남기거나 선호하는 성능 모니터링 서비스로 이 정보를 보냅니다
console.log(`렌더링 ${id}에 ${actualDuration}ms가 걸렸습니다`);
}

이 예제에서 우리는 전체 애플리케이션을 Profiler 컴포넌트로 감싸고 있습니다. onRender 속성은 렌더링된 컴포넌트 트리가 "커밋"될 때마다 React가 호출할 콜백 함수입니다.

콜백 매개변수 이해하기

onRenderCallback 함수의 각 매개변수는 다음과 같은 의미입니다:

  1. id: 프로파일러의 이름 태그와 같은 역할을 하며, 측정하고자 하는 애플리케이션 부분을 식별하는 데 도움을 줍니다.
  2. phase: 컴포넌트가 최초 마운트되었는지 또는 업데이트되었는지를 알려줍니다.
  3. actualDuration: 변경 사항을 렌더링하는 데 걸린 시간입니다.
  4. baseDuration: 메모리제이션 없이 전체 서브트리를 렌더링하는 데 예상되는 시간입니다.
  5. startTime과 commitTime: React가 렌더링을 시작하고 마친 시간을 나타냅니다.
  6. interactions: 렌더링을 촉발한 특정 사용자 상호작용을 추적하는 데 사용됩니다.

실제 상황에서 Profiler 사용하기

이제 기본 개념을 이해했으므로, 실제 상황에서 Profiler를 어떻게 사용할 수 있는지 보겠습니다.

특정 컴포넌트 프로파일링

예를 들어, 할 일 목록 애플리케이션에서 목록 렌더링을 프로파일링하고 싶다면:

import React, { Profiler, useState } from 'react';

function TodoList({ todos }) {
return (
<Profiler id="TodoList" onRender={onRenderCallback}>
<ul>
{todos.map(todo => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
</Profiler>
);
}

function TodoApp() {
const [todos, setTodos] = useState([
{ id: 1, text: 'React 배우기' },
{ id: 2, text: '어마zing 앱 만들기' }
]);

return (
<div>
<h1>제 할 일 목록</h1>
<TodoList todos={todos} />
<button onClick={() => setTodos([...todos, { id: Date.now(), text: '새 할 일' }])}>
할 일 추가
</button>
</div>
);
}

이 예제에서 우리는 TodoList 컴포넌트를 특정하게 프로파일링하고 있습니다. 이를 통해 할 일 목록을 렌더링하는 데 걸리는 시간을 측정할 수 있으며, 많은 항목이 있는 경우 유용할 수 있습니다.

네스티드 프로파일러

프로파일러를 중첩하여 더 세밀한 측정을 할 수 있습니다:

function ComplexComponent() {
return (
<Profiler id="ComplexComponent" onRender={onRenderCallback}>
<div>
<Profiler id="Header" onRender={onRenderCallback}>
<Header />
</Profiler>
<Profiler id="Content" onRender={onRenderCallback}>
<Content />
</Profiler>
<Profiler id="Footer" onRender={onRenderCallback}>
<Footer />
</Profiler>
</div>
</Profiler>
);
}

이 설정을 통해 ComplexComponent 전체와 그 부분들의 성능을 측정할 수 있습니다.

Profiler React DevTools

콘솔 로그는 개발에 유용하지만, React DevTools의 Profiler는 더 시각적이고 상호작용적인 방법으로 성능을 분석할 수 있습니다.

React DevTools에서 Profiler 사용하기

  1. React DevTools 브라우저 확장 프로그램을 설치합니다.
  2. 브라우저에서 애플리케이션을 엽니다.
  3. 개발자 도구를 엽고 "Profiler" 탭으로 전환합니다.
  4. "Record" 버튼을 클릭하여 프로파일링을 시작합니다.
  5. 애플리케이션과 상호작용합니다.
  6. 녹음을 중지하고 결과를 분석합니다.

DevTools Profiler는 컴포넌트 렌더링의 flame chart 시각화를 제공하여 성능 문제를 쉽게 찾을 수 있게 합니다.

결과 해석

DevTools Profiler에서는 다음과 같은 것을 볼 수 있습니다:

  • 컴포넌트 렌더링을 나타내는 색상 바
  • 각 바의 너비는 렌더링 시간을 나타냅니다
  • 바를 마우스 오버하면 상세 시간 정보가 표시됩니다

자주 렌더링되거나 렌더링 시간이 오래 걸리는 컴포넌트를 찾아 최적화 대상으로 삼아야 합니다.

최적화 기술

이제 느린 컴포넌트를 식별할 수 있으므로, 어떻게 최적화할 수 있는지 살펴보겠습니다.

  1. 메모리제이션: 기능 컴포넌트에 대해 React.memo를 사용하거나 클래스 컴포넌트에 대해 shouldComponentUpdate를 사용하여 불필요한 재 렌더링을 방지합니다.
  2. 코드 분할: React.lazy와 Suspense를 사용하여 필요할 때만 컴포넌트를 로드합니다.
  3. 가상화: 긴 목록에 대해 react-window와 같은 라이브러리를 사용하여 가시적인 항목만 렌더링합니다.
  4. debouncing과 throttling: 자주 변경되는 데이터에 대해 이 기술을 사용하여 업데이트 빈도를 제한합니다.

메모리제이션의 빠른 예제:

import React, { memo } from 'react';

const ExpensiveComponent = memo(function ExpensiveComponent({ data }) {
// 비싼 렌더링 로직 여기
return <div>{/* 렌더링된 콘텐츠 */}</div>;
});

결론

축하합니다! React 성능 최적화의 첫 걸음을 냈습니다. Profiler API는 강력한 도구이지만, 모든 것을 최적화하는 것은 아닙니다. 애플리케이션의 실제로 필요한 부분에 집중하세요.

React 여정을 계속하면서 Profiler를 계속 실험해 보세요. 이 도구는 더 빠르고 효율적인 애플리케이션을 만들어주는 초능력과도 같습니다. 그리고 누가 알랄까요? 어쩌면 언젠가 다른 사람들에게 고급 React 최적화 기술을 가르치는 사람이 되실지도 모릅니다!

행복하게 코딩하세요, 컴포넌트가 항상 빠르게 렌더링되길 바랍니다!

Credits: Image by storyset

이전 튜토리얼:
ReactJS - 성능 최적화
다음 튜토리얼:
ReactJS - 포털