React developer tool 사용법

React developer tool은 리액트로 개발된 브라우저에서 여러가지 컴포넌트 정보들을 제공해주는 도구입니다.

Chrome, Edge, Firefox 브라우저를 지원합니다.

1. 설치하기

 

 

2. 확장 프로그램 추가

React developer tool을 검색해 설치합니다.

 

3. 확장 프로그램 관리

다시 1번에서 확장 프로그램 관리로 접속합니다.

 

세부 정보에 들어가 아래 설정을 허용시켜줍니다.

• 시크릿 모드에서 허용
• 파일 URL에 대한 액세스 허용

 

4. 실행

브라우저 상단에 버튼을 클릭해 React Developer Tools 핀을 고정합니다.

 

5. 테스트

사이트에서 개발자도구를 실행합니다.

>> 아이콘 클릭 후 Components를 클릭해보면 우측과 같이 컴포넌트의 props, hook 확인이 가능합니다.

 

⚙️아이콘 - General - Highlight updates when components render. 체크를 해주면 렌더링이 발생되는 부분에 표시도 가능합니다.