어떤 때 쓰면 좋을까요?
React 앱에서 어떤 컴포넌트가 화면을 만들고 어떤 값을 받는지 확인할 때 활용합니다. 개발자 도구에 추가되는 패널에서 계층을 선택해 현재 상태를 살펴볼 수 있어요.
느린 화면을 조사할 때는 프로파일링으로 렌더링 동작을 기록해보세요. 기록 결과를 코드와 함께 봐야 원인을 판단할 수 있습니다. 앱의 빌드 방식과 React 버전에 따라 확인할 수 있는 정보가 달라질 수 있습니다.
React Developer Tools
크롬 확장 · 개발·데이터
React 화면의 컴포넌트·props·성능 보기
React가 제공하는 개발자 도구 확장으로 컴포넌트 트리와 props·state, 프로파일링 결과를 확인합니다.
- 컴포넌트 상태 검사
- 렌더링 프로파일링
이렇게 써보세요
검색어를 바꿀 때 화면이 느리다면 프로파일러로 그 동작을 기록하고 어떤 컴포넌트가 오래 렌더링되는지 확인해보세요.
얻는 결과컴포넌트 구조와 렌더링 측정 결과
사용 순서
React 앱을 열고 개발자 도구를 엽니다
Components에서 props·state를 확인합니다
Profiler로 필요한 동작을 기록합니다
사용할 때 알아두세요
React 앱용 도구입니다. 개발용 빌드와 운영용 빌드에서 제공하는 정보가 다를 수 있습니다.
제작자 소개 · 2026-10-04 확인 · 기능·요금은 제작자의 최신 안내를 확인하세요.