[React] 19. 리액트 개발자 도구

Mar 03, 2026

Contents

1. 리액트 개발자 도구 설치 및 설정

리액트 개발을 할 때 편리한 개발자 도구를 설치해보자.

Adds React debugging tools to the Chrome Developer Tools. Created from revision 3cde211b0c on 10/20/2025.

크롬 확장 프로그램에 검색하거나 위 링크를 통해 접속한다.

설치가 완료되면 브라우저 우측 상단에 더보기 버튼을 클릭해

확장 프로그램 → 확장 프로그램 관리로 이동해주자.

설치된 리액트 개발자 도구 확장자가 꺼져있다면 켜주자.

그리고 세부정보에 들어가 엑세스 권한을 모든 사이트로 변경하자.

파일 URL에 대한 엑세스 허용도 켜주자.

그러고 난 다음 우리가 이 확장 프로그램을 더 편리하게 사용하기 위해

브라우저 상단의 우측에 보이는 퍼즐 아이콘을 클릭해서

설치한 리액트 개발자 도구 확장 프로그램을 핀으로 고정해주자.

그러고 난 다음 리액트로 개발중인 프로그램을 실행해서 브라우저에 띄워보면 브라우저의 확장 프로그램 핀에 설치했던 프로그램 아이콘이 붉은색이 된 것을 확인할 수 있는데 이를 클릭해보면 현재 리액트 프로그램이 개발 모드로 실행중이라는 문구를 확인할 수 있다.

개발자 도구를 통해 살펴보면 패널에 컴포넌츠와 프로파일러 탭이 추가된 걸 확인할 수 있다.

컴포넌츠를 클릭하면 개발중인 프로그램의 컴포넌트 계층 구조를 볼 수 있다.

그리고 컴포넌트를 클릭하면 이 컴포넌트가 받는 props와 사용중인 hooks를 볼 수 있다.

개발을 하며 state가 잘 저장되고 있는지 확인할 때도 유용하다!

변경된 props 또한 잘 변경되고 있는 지 확인할 수 있다.

그리고 빨간색으로 표시한 톱니바퀴 아이콘을 클릭하면

세팅 메뉴가 나타나는데, 여기서 빨간 박스로 표시한 부분을 체크하면

상태가 변경 될 때 현재 리렌더링되고있는 컴포넌트들을 하이라이트하여

어떤 컴포넌트가 리렌더링되고있는지 확인할 수 있는데,

개발 시 불필요하게 렌더링되고있는 부분을 수정할 때도 용이하고

의도한대로 렌더링이 되지 않을 때에도 확인하여 수정하는 데에 도움이 된다.