React 사용시 개발자모드 Elements 탭에서는 브라우저가 이해하는 코드를 보여주기 때문에 우리가 React를 사용하여 스크립트로 작성한 컴포넌트 구조를 정확히 볼 수 없다.
React Developer Tools를 사용하게 되면,
크롬 웹에서 개발자 모드로 컴포넌트(Components) 구조를 볼 수 있고 변경하면서 테스트에 용이하다.
😎 링크
React Developer Tools
Adds React debugging tools to the Chrome Developer Tools. Created from revision 2f8f60ca8 on 10/31/2021.
chrome.google.com
Chrome에 추가 버튼 클릭후 설치하면 된다.
매우 쉬움
리액트 개발시, 컴포넌트의 이해를 돕는다.
필수는 아니지만, 도움이 되는 크롬 추가 기능 이므로 사용을 권장
F12 개발자 툴 을 열면
흔히 보는 console창이 아닌 새로운 탭 생성
리액트의 데이터흐름을 볼수있는 크롬의 기능
728x90
반응형
'Front-end > React' 카테고리의 다른 글
| [ React ] 리액트 리덕스(Redux) 사용& 적용 (0) | 2021.12.28 |
|---|---|
| [ React ] 리액트 리덕스(Redux) 정의 (0) | 2021.12.28 |
| [VScode] 리액트 필수 플러그인 React 코드 템플릿 자동 완성 플러그인 @ Reactjs code snippets (0) | 2021.11.19 |
| [React] 클립보드 텍스트 복사하기 (0) | 2021.11.17 |
| React Hooks : useEffect() 함수 (0) | 2021.11.14 |
댓글