React developer tools

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

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

React Developer Tools

Adds React debugging tools to the Chrome Developer Tools. Created from revision ca7a38ae4 on 5/12/2022.

chrome.google.com

이 사이트에서 다운

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

그리고 설정을 켜준다.

그 후 npm start를 하면

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

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

-Component

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

state, props를 알 수 있다.

-오른쪽 설정

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

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

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