React DevTools

React DevTools

Components

현재 페이지에서 렌더링된 컴포넌트 계층 구조를 시각적으로 확인할 수 있고 디버깅하는데 도움을 주는 도구

• 루트 컴포넌트부터 시작해서 하위 컴포넌트까지의 계층 구조를 표시하여 어떤 컴포넌트가 어느 부분에서 렌더링 되고 있는지와 컴포넌트 간의 관계를 파악할 수 있다.

• 표시된 각 컴포넌트를 클릭하면 state와 props, property도 확인할 수 있으며, 소스코드도 볼 수 있다.

Profiler

성능 정보를 기록해서 컴포넌트의 렌더링 시간과 호출 횟수를 기록하고, 성능 문제를 식별하여 디버깅하는데 도움을 준다.

• React 16.5에서 추가된 새로운 DevTools로 프로파일러 플러그인이 추가 되었다.

• React의 Profiler API를 사용해서 React 애플리케이션의 성능 병목 현상을 식별하기 위해 렌더링된 각 컴포넌트에 대한 타이밍 정보를 수집한다.

Profiler 성능 측정하기

• 프로파일링을 시작하면, 컴포넌트가 렌더링 될 때 마다 어떤 컴포넌트에서 시간이 얼마나 걸리는지 측정해준다.