React developer tools

React developer tools

리엑트 개발시에 생산성을 굉장히 늘려준다.

이것은 크롬의 확장 도구이다.

 

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=ko 

React Developer Tools

이 사이트에서 다운

 

설정 -> 도구 더보기 -> 확장 프로그램 -> 세부 정보

그리고 설정을 켜준다.

그 후 npm start를 하면

오른쪽 상단처럼 주황색으로 떠야한다. 이 의미는 이 페이지는 리엑트를 개발중이라는 의미이다.

 

그리고 개발자 도구에는 Components와 Profiler가 생겼다.

 

-Component

이런식으로 만들었던 컴포넌트 계층 구조를 해석해서 보여준다.

state, props를 알 수 있다.

 

-오른쪽 설정

그리고 체크 박스를 체크하면

이렇게 노란색 테두리가 나오고 리렌더된다는 것을 알려준다.

 

이런 기능을 잘 활용하면 로직이나 실수을 잘 확인할 수 있을 것 같다.