React Academy · 강의

Profiler 탭 사용하기

렌더링을 기록하고 플레임 그래프를 읽어 느린 구성 요소를 찾습니다.

Profiler 탭 사용하기은(는) CoddyKit의 무료 React Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

환영합니다

이 레슨에서는 React DevTools Profiler를 사용해 렌더링을 기록하고, 불꽃 그래프를 읽고, 성능 병목을 일으키는 컴포넌트를 식별하는 방법을 배웁니다.

Profiler 열기

React DevTools에서 Components 옆에 있는 **Profiler** 탭을 클릭합니다. 원형 아이콘이 있는 기록 버튼과 새로고침 및 프로파일링 버튼이 표시됩니다. 프로파일러는 개발 모드에서만 작동합니다.

세션 기록하기

**기록**(원형 아이콘)을 클릭하고 앱과 상호 작용합니다(예: 버튼을 클릭하거나 입력란에 입력). 그런 다음 **중지**(사각형 아이콘)를 클릭합니다. DevTools가 세션 중에 발생한 모든 렌더링을 캡처합니다.

불꽃 그래프 읽기

불꽃 그래프에는 커밋마다 컴포넌트 하나당 막대 하나가 표시됩니다. 너비 = 렌더링에 소요된 시간입니다. 높은 스택은 깊은 컴포넌트 트리를 의미합니다. 막대 위에 마우스를 올리면 컴포넌트 이름과 정확한 렌더링 시간을 볼 수 있습니다.

커밋 타임라인

Profiler 상단에는 작은 막대가 한 줄로 표시되며, 각 막대는 React 커밋 하나를 나타냅니다. 더 높은 막대는 더 느린 커밋을 의미합니다. 막대를 클릭하면 해당 커밋의 불꽃 그래프로 이동합니다.

컴포넌트가 렌더링된 이유

플레임 그래프에서 컴포넌트를 선택하고 **이 렌더링이 발생한 이유는 무엇인가요?** 섹션을 확인하십시오. 프롭이 변경되었는지, 상태가 변경되었는지, 부모 컴포넌트가 다시 렌더링되었는지를 보여 줍니다.

회색 막대와 색상 막대

회색 막대는 해당 커밋에서 컴포넌트가 렌더링되지 않았다는 뜻입니다(React가 이전 출력을 재사용했습니다). 색상 막대는 컴포넌트가 다시 렌더링되었다는 뜻이며, 색상이 어두울수록 렌더링 시간이 깁니다.

순위 차트 보기

플레임 그래프에서 상단의 전환 버튼을 사용해 **순위** 차트로 전환하십시오. 이 차트에는 렌더링된 모든 컴포넌트가 렌더링 시간순으로 정렬되어 표시되므로, 가장 느린 컴포넌트를 즉시 찾을 수 있습니다.

기록 및 다시 불러오기

기록 대신 **다시 불러오고 프로파일링**을 클릭하여 초기 렌더링을 포함한 페이지 로드를 캡처하십시오. 이를 통해 최초 마운트에서 느린 컴포넌트를 찾을 수 있습니다.

프로덕션에서 프로파일링 활성화

프로덕션 빌드에서는 기본적으로 프로파일러가 비활성화됩니다. 프로덕션을 프로파일링하려면 `react-dom/profiling`을 별칭으로 지정하고 `scheduler/tracing-profiling`을 사용해 빌드하십시오. 대부분의 팀은 먼저 개발 환경에서 프로파일링합니다.

빠른 확인

React DevTools 프로파일러의 플레임 그래프에서 막대의 너비는 무엇을 나타내나요?

복습

이제 프로파일러 세션을 기록하고, 플레임 그래프와 순위 차트를 읽고, 컴포넌트가 다시 렌더링된 이유를 확인하고, 커밋 타임라인을 사용해 렌더링 사이를 이동할 수 있습니다.

다음 학습

다음 레슨: **일반적인 React 오류 디버깅** — DevTools와 브라우저 콘솔을 사용해 누락된 키 경고, 정의되지 않은 상태 버그, 하이드레이션 불일치를 진단합니다.

자주 묻는 질문

“Profiler 탭 사용하기” 강의는 무료인가요?

네 — “Profiler 탭 사용하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Academy 강의 전체를 잠금 해제할 수 있습니다. React Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Profiler 탭 사용하기”에서 뭘 배우나요?

렌더링을 기록하고 플레임 그래프를 읽어 느린 구성 요소를 찾습니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

React Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 React Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“Profiler 탭 사용하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 React Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 React Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← React Academy(으)로 돌아가기