[Chrome] React Developer Tools 설치

---

리액트는 디버깅이 복잡하여 일반적인 웹페이지를 만들 때처럼 브라우저 개발자 도구를 사용하는 것에 한계가 있다.

효율적인 디버깅을 눈으로 직접 확인할 수 있어 react로 개발 시 사용하는 것을 추천한다.

리액트 디버깅과 개발을 돕기 위한 브라우저 확장 프로그램이다.

• 컴포넌트 계층 구조 표시
  • 리액트 컴포넌트 계층 구조를 시각적으로 볼 수 있다.
  • 컴포넌트의 자식, 부모 관계 등을 파악할 수 있다.
• 상태와 속성 시각화
  • 개발 중인 컴포넌트의 상태(State)와 속성(Props) 정보를 실시간으로 확인할 수 있다.
  • 이를 통해 컴포넌트가 어떤 데이터를 받고 어떤 상태를 가지는지 파악할 수 있다.
• 상태 변화 추적
  • 컴포넌트의 상태 변화를 추적하고 디버깅할 수 있다.
  • 컴포넌트의 상태가 어떻게 변경되는지, 어떤 이벤트에 의해 상태가 업데이트되는지 등을 확인할 수 있다.
• Virtual DOM 시각화
  • 리액트는 Virtual DOM을 사용하여 성능을 최적화하는데 React Dev Tools를 통해 이 Virtual DOM의 구조를 시각화하여 어떤 부분이 업데이트되는지 등을 확인할 수 있다.

React Dev Tools는 크롬, 파이어폭스, 엣지 등의 주요 브라우저에서 사용할 수 있으며, 개발자 도구 확장 프로그램으로 설치하여 활용할 수 있다.

이 도구는 React 애플리케이션 개발의 생산성과 품질 향상을 돕는 중요한 도구 중 하나이다.

---

크롬 웹 스토어에서 " React Developer Tools " 를 설치한다. [바로가기]

React Developer Tools

 

Chrome에 추가 클릭

확장 프로그램 추가 클릭

설치 완료

 

우측 메뉴 > 확장 프로그램> 확장 프로그램관리 클

세부 정보 클릭

 

 

스크롤을 조금 내려 파일 URL에 대한 액세스 허용

 

 

리액트 개발 화면에서 개발자 도구를 연다.

>>를 클릭한 후 components를 클릭하면 react 컴포넌트에 대한 정보가 나온다.

 

 

컴포넌트의 props, hooks 등 정보를 보여준다.

 

 

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]