[React] React developer tools

React developer tools

 

복잡한 리액트 앱을 개발하는 과정에서 State 값이 변경될 때마다 useEffect을 수정하고 console.log로 확인한다면 이는 무척 번거로운 일이 될 것이다. 그래서 리액트 앱을 개발할 때 유용하게 사용하는 리액트 개발자 도구를 설치한다. 리액트 개발자 도구는 확장 도구로서 크롬 브라우저에 설치해 사용한다. 

 

[설정]

 

• 크롬 브라우저 우측 상단의 확장 아이콘을 선택하면 나오는 메뉴
  • [도구 더보기]-[확장 프로그램] 클릭
• 스위치 On으로 설정
• [세부 정보] 페이지
  • 사용: ON
  • 사이트 액세스: 모든 사이트에서
  • 시크릿 모드에서 허용: 시크릿 모드에서 리액트 개발자 도구를 사용하려면 ON, 그렇지 않으면 자유롭게 설정한다. 잘 모르겠다면 ON으로 설정한다.
  • 파일 URL에 대한 엑세스 허용: ON
• 아이콘 핀으로 고정

 

[기능]

 

개발자 도구 상단 >>을 클릭하면 [Components]와 [Profiler]가 있다. 리액트 개발자 도구가 제공하는 기능이다. 컴포넌트 계층 구조의 확인이나 성능 측정 등 개발에 필요한 유용한 기능들이 있다.

 

[Components] 탭

 

• 컴포넌트 트리 살펴보기
  • App을 클릭하면 해당 컴포넌트의 Props와 State를 실시간으로 모니터링할 수 있다. 
  • App 컴포넌트가 어떤 State, Ref, Effect를 가지고 있는지 알 수 있다.
• State 모니터링하기
• Props 모니터링하기
  • App 컴포넌트가 전달한 State 변수를 Props로 받아 페이지에 렌더링하는 컴포넌트다.
  • 각각의 컴포넌트가 어떤 props를 받았는지? 어떤 props는 어떤 함수인지? 도 알 수 있다.
• 리렌더 하이라이트 기능 사용하기
  • ☑️Highlight updates when components render 체크하면 화면에 리렌더 되고 있다는 표시가 나타난다.
  • 컴포넌트가 리렌더할 때마다 전체 컴포넌트 영역의 색이 변한다. 노란색일수록 빠른 시간 내에 많은 리렌더가 발생했다는 의미이다.
  • 리렌더 하이라이트 기능은 [Components] 탭이 열려 있어야 확인할 수 있다.
• list 아이템의 key 값까지 알 수 있다.

 

[Profiler] 탭

 

• 현재 리액트 앱의 컴포넌트 트리 확인
• 각 컴포넌트가 관리하는 State 등의 정보를 확인
• 리액트 컴포넌트의 렌더링 성능을 측정