React / React Developer Tools

 

React 개발자 도구

브라우저 확장 프로그램으로 React 컴포넌트를 검사하고 Props와 State를 편집할 수 있으며 성능 문제를 식별할 수 있다.

주요 기능은 다음과 같다.

• 컴포넌트 탐색, 계층 구조 표시
• 상태 및 props, hooks 확인
• 상태 변화 추적
• virtual DOM 시각화

 

공식 홈페이지 : https://ko.react.dev/learn/react-developer-tools

 

크롬에서는 추가만 하면 준비 끝

 

 

---

 

 

사용 방법

 

 

임의의 리액트 프로젝트를 실행시켰을 때, 개발자 도구의 Components 탭에서 확인할 수 있다.

컴포넌트 단위로 화면의 구성을 확인할 수 있으며, props나 hooks도 보여진다. 

 

 

여기서 빨간 동그라미로 표시해둔 톱니 아이콘을 클릭하면 오른쪽 이미지와 같은 설정 모달이 뜨는데,

Highlight updates~~ 저 부분을 체크하면 렌더링이 될 때마다 렌더링이 되고 있는 컴포넌트의 경계를 강조 표시해준다.