[React] React Developer Tools의 기능은 뭘까?

 

웹페이지에서 개발자 도구를 활용하여 어떤구조로 이루어져있는지 소스를 확인할 수 있다.

 

하지만 컴포넌트는 보여지지 않는다.

이 컴포넌트를 보고자 할때는 어떤 방법을 활용해야 할까?

React Developer Tools라는 크롬 확장프로그램이 있다. 이것을 설치하게 된다면 보고자 하는 웹페이지의 컴포넌트 구조까지 볼 수 있다.

 

React Developer Tools를 설치 완료하였다면 F12를 눌러 개발자 도구 상단 탭 우측에 Components를 볼 수 있을것이다.

 

이와 같이 해당 컴포넌트의 구조를 확인할 수 있으면 컴포넌트 내에 있는 state 값도 같이 확인할 수 있는걸 볼 수 있다.

또한 state 값도 변경이 가능하며 실시간으로 확인할 수 있다.