[React] 리액트 개발 도구로 디버깅하기 - React Developer Tools

(해당 게시글은 모던 리액트 Deep Dive 를 참고해서 작성한 글입니다.)

모던 리액트 Deep Dive

 

React 개발 도구 설치

React 에서 디버깅을 하기 위해 크롬 확장 프로그램 중에서 React Developer Tools를 설치해야 한다.

react developer tools

 

정상적으로 설치가 되면 크롬 우측 상단 확장 도구 모음에 React 로고가 생긴 것을 확인할 수 있게 된다.

 

현재 티스토리 블로그도 React 로 만들어졌기 때문에 활성화된 것을 확인할 수 있고

활성화

만약 React 개발 모드라면 로고가 빨간색으로 되어 있으며

개발 모드

React 로 만들어지지 않는 웹사이트는 회색으로 표시되게 된다.

비활성화

 

React 개발 도구 활용하기

 React Developer Tools를 설치하게 되면 이제 개발자 도구에서 Components 와 Profiler 메뉴가 추가된다.

components, profiler

 

Components

Components 탭에서는 리액트 애플리케이션의 컴포넌트 트리를 확인할 수 있게 되며, 단순히 구조뿐만 아니라 props 와 내부 hooks 등 다양한 정보를 확인할 수 있게 된다.

컴포넌트 트리

 

Anonymous

익명 함수로 선언되어 있으면 Anonymous 라는 이름으로 컴포넌트를 보여주거나 다른 이름으로 보여주고 있다.

anonymous

 

그래서 만약 디버깅 도구에서 컴포넌트이 이름을 표시하고 싶은 경우 기명 함수로 변경하거나 displayName 을 설명하면 컴포넌트 명을 설정한 대로 확인할 수 있게 된다.

그러나 이는 프로덕션 모드에서는 컴포넌트 명을 난수화하기 때문에 개발 모드에서만 제한적으로 참고해야 한다.

displayName

 

컴포넌트 도구

컴포넌트를 클릭하면 해당 컴포넌트에 대한 자세한 정보를 보여준다. 오른쪽에 3개의 아이콘이 있는데

컴포넌트 도구

 

• 눈👁️ 아이콘을 클릭하면 해당 컴포넌트가 HTML 의 어디에서 렌더링 됐는지 확인할 수 있다.
• 벌레🐛 아이콘을 클릭하면 console 에 해당 컴포넌트의 정보가 찍히게 된다.

벌레🐛 아이콘

• 소스코드🖥️ 아이콘을 클릭하면 해당 컴포넌트이 소스 코드를 확인할 수 있다.

 

컴포넌트 props

해당 컴포넌트가 받은 Props 를 확인할 수 있다. 

오른쪽 버튼을 눌러 첫 번째를 누르면 클립보드로 복사되며, 두 번째를 누르면 콘솔창에 해당 변수에 대한 정보가 담겨 있는 걸 보게 된다.

props

store as global varible

 

그리고 함수 props 를 오른쪽 버튼을 누른 후, 세 번째를 누르면 해당 함수가 선언된 코드로 이동한다.

Go to definition

 

컴포넌트 hooks

컴포넌트에서 사용 중인 훅 정보도 확인할 수 있다.

이는 use 가 생략된 이름으로 나타나며, 왼쪽에 회색 숫자가 안 붙은 hook 은 커스텀 훅이다.

hook

 

컴포넌트를 렌더링한 주체 rendered by

해당 컴포넌트를 렌더링한 주체가 누구인지 확인할 수 있다.

rendered by

 

Profiler

프로파일러는 렌더링하는 과정에서 발생하는 상황을 확인하기 위한 도구이다.

즉 React 애플리케이션이 렌더링 되는 과정에서 어떤 컴포넌트가 렌더링 됐는지, 또 몇 차례나 렌더링 일어났으며 어떤 작업에서 오래 걸렸는지 등 컴포넌트 렌더링 과정에서 발생하는 일을 확인할 수 있다.

 

설정창에서 Highlight updates when components render 를 클릭하면 렌더링 되는 곳을 눈으로 확인할 수 있게 된다.

highlight updates when components render

 

프로파일링 메뉴

프로파일링 메뉴는 리액트가 렌더링 할 때 어떠한 일이 벌어지는지 확인할 수 있는 도구다.

프로파일링 메뉴

• 첫 번째: Start Profiling(프로파일링 시작) 버튼으로 누르면 프로파일링이 시작된다.
• 두 번재: Reload and Start profiling(새로고침 후 프로파일링 시작) 버튼 누르면 웹페이지가 새로고침되면서 동시에 프로파일링 시작
• 세 번째: Stop Profiling(프로파일링 종료) 버튼 누르면 프로파일링 된 현재 내용 모두 지움
• 네 번째: Load Profile(프로파일 불러오기) 버튼
• 다섯 번째: Save Profile(프로파일 저장하기) 버튼

 

프로파일링 결과

프로파일링을 수행한 후, 불꽃🔥 아이콘을 누르면 렌더 커밋별로 어떠한 작업이 일어났는지 나타낸다.

바가 넓을수록 해당 컴포넌트를 렌더링하는 데 오래 걸렸다는 의미이다.

flamegraph

 

그래프 📊 아이콘을 누르면 해당 커밋에서 렌더링 하는데 오랜 시간이 걸린 컴포넌트를 순서대로 나열한 그래프를 볼 수 있다.

ranked

 

달력 🗓️ 아이콘을 누르면 시간이 지남에 따라 컴포넌트에서 어떤 일이 일어났는지 확인할 수 있다. 즉 시간의 흐름에 따라 작동하는 내용을 추적하는데 유용하다.

timeline

 

이제 이 도구들을 활용해서 리액트 애플리케이션을 디버깅 할 수 있게 된다.

 

사실 지금까지 이 도구들을 제대로 활용해본 경험이 없었는데 각 무슨 기능을 하고 어떻게 디버깅을 할 수 있는지 알게 되었다!