0Pricing
React Academy · 강의

React DevTools 설치 및 열기

Chrome/Firefox에 React DevTools를 설정하고 Components 패널을 탐색합니다.

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

환영합니다

이 레슨에서는 React DevTools 브라우저 확장 프로그램을 설치하고 Components 패널을 탐색하여 실행 중인 React 앱을 검사하는 방법을 배웁니다.

React DevTools란 무엇인가요?

React DevTools는 Chrome/Firefox DevTools에 두 개의 새 패널을 추가하는 브라우저 확장 프로그램입니다: **컴포넌트**(트리 검사)와 **프로파일러**(성능 측정)입니다. 개발 모드에서 모든 React 앱과 함께 작동합니다.

확장 프로그램 설치하기

Chrome 웹 스토어(또는 Firefox 부가 기능)로 이동하여 **React Developer Tools**를 검색합니다. **Chrome에 추가**(또는 Firefox)를 클릭합니다. React를 사용하는 페이지에서는 도구 모음의 React 아이콘이 켜집니다.

DevTools 열기

**F12**(Mac에서는 Cmd+Option+I)를 눌러 브라우저 DevTools를 엽니다. Elements와 Console 옆에 **컴포넌트**와 **프로파일러**라는 새 탭이 표시됩니다.

Components 패널

Components 탭에는 현재 페이지의 전체 React 컴포넌트 트리가 표시됩니다. 컴포넌트를 클릭하면 해당 컴포넌트의 속성, 상태, 훅, 그리고 렌더링한 원본 파일을 검사할 수 있습니다.

트리 탐색하기

Components 패널 상단의 검색 상자를 사용해 컴포넌트 이름으로 필터링합니다. 트리에서 컴포넌트를 클릭하면 오른쪽에 세부 정보가 표시됩니다. 화살표를 사용해 하위 항목을 펼치거나 접습니다.

속성 실시간 검사하기

컴포넌트를 클릭하면 현재 **속성**이 오른쪽 창에 표시됩니다. DevTools에서 속성 값을 직접 편집하여 원본 코드를 수정하지 않고도 UI 변경 사항을 미리 볼 수 있습니다.

상태 및 훅 검사하기

속성 아래에서 상태, 효과, 메모, 참조와 같은 **훅**을 볼 수 있습니다. 상태를 펼치면 해당 컴포넌트의 모든 useState 호출이 현재 어떤 값을 갖는지 표시됩니다.

개발 모드 요구 사항

React DevTools는 앱이 **개발 모드**로 실행될 때만 컴포넌트 이름을 표시합니다. 프로덕션 빌드에서는 더 작은 번들을 만들기 위해 React가 컴포넌트 이름을 제거하므로, 항상 npm start 또는 npm run dev를 사용해 로컬에서 디버깅하세요.

업데이트 강조 표시

DevTools 설정(톱니바퀴 아이콘)에서 **컴포넌트가 렌더링될 때 업데이트 강조 표시**를 활성화합니다. 다시 렌더링되는 컴포넌트가 색상으로 표시되어 불필요한 렌더링을 즉시 확인할 수 있습니다.

빠른 확인

React DevTools 확장 프로그램이 브라우저 개발자 도구에 추가하는 탭 두 개는 무엇인가요?

복습

React DevTools를 설치하고 Components 패널을 살펴보았습니다. 이제 원본 코드를 전혀 건드리지 않고도 컴포넌트 트리를 검사하고, 실시간 속성과 상태를 읽고, 값을 즉시 편집하고, 다시 렌더링되는 컴포넌트를 강조 표시할 수 있습니다.

다음 학습

다음 레슨: **컴포넌트 트리 및 속성 검사하기** — 중첩된 계층 구조를 자세히 살펴보고 DevTools 사이드바에서 복잡한 속성과 상태 구조를 읽는 방법을 배웁니다.

자주 묻는 질문

“React DevTools 설치 및 열기” 강의는 무료인가요?

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

“React DevTools 설치 및 열기”에서 뭘 배우나요?

Chrome/Firefox에 React DevTools를 설정하고 Components 패널을 탐색합니다. 브라우저에서 직접 실행하는 실습 코드로 React Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“React DevTools 설치 및 열기” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

  1. React DevTools 설치 및 열기
  2. 구성 요소 트리 및 props 검사
  3. Profiler 탭 사용하기
  4. 일반적인 React 오류 디버깅
← React Academy(으)로 돌아가기