[ React ] React 기본 ⑥ React Developer Tools

React Developer Tools : 리액트 개발시에 생산성을 늘려주는 편리한 크롬 개발자 확장 도구

 

 

 

npm start로 리액트를 시작한 페이지에 React Developer Tools가 표시가 되면 해당 페이지는 리액트를 개발 중이라고

알려준다. 

 

F12를 눌러 개발자 도구를 열어보면 React Developer Tools가 제공하는 Components와 Profiler를 확인할 수 있다.

 

 

Components : 만들어놓은 컴포넌트를 React Developer Tools가 해석해서 보여주게 된다.

→ 컴포넌트의 계층 구조, 각각의 컴포넌트가 어떤 데이터와 props, state를 가지고 있는지 쉽게 확인 가능

 

 

또한 Highlight 기능을 켜준다면 컴포넌트가 리랜더링 될 때마다 리랜더링 되고 있는 부분이 강조가 된다.