React Developer Tools는 우리가 React를 사용하여 스크립트로 작성한 컴포넌트 구조를 볼 수 있고 변경하며 테스트를 할 수 있도록 도움을 주는 유용한 디버깅 도구이다.
크롬 확장 프로그램에서 추가하면 개발자 모드에서 관련 텝을 사용할 수 있다.
Components 텝에서 우리가 작성한 컴포넌트들만을 확인할 수 있으며
해당 컴포넌트의 props와 랜더링되는 부모 요소도 한눈에 볼 수 있다.
또한 사용중인 hook을 수정하며 테스트가 가능하다.
Input 입력란에 잘못된 값이 들어왔을때 state가 false로 바뀌어 style이 변경되며 입력이 되지 않게 코딩되어 있는데 아래와 같이 devTools에서 state를 수정하여 간편하게 확인할 수 있다.
React를 사용하는 입장에서 좋은 Tool이라 생각된다.
앞으로 잘 애용해보자 :)
Road to FE