들어가며

React로 개발하다 보면 이런 순간이 종종 있습니다.

“지금 이 컴포넌트 props가 뭐지?”

“state 값이 지금 어떻게 들어가 있지?”

코드를 따라 올라가면서 확인할 수도 있지만, 컴포넌트가 많아질수록 이런 작업은 생각보다 번거롭습니다.

이럴 때 꽤 편하게 사용할 수 있는 도구가 React Developer Tools입니다.

React DevTools는 브라우저 개발자 도구에 추가되는 확장 프로그램으로, 현재 페이지의 React 컴포넌트 구조와 상태를 확인할 수 있는 도구입니다.

이번 글에서는 React DevTools에서 자주 사용하게 되는 기능 몇 가지를 가볍게 살펴보겠습니다.

 

React DevTools

React DevTools를 설치하면 브라우저 DevTools에 React 전용 패널이 추가됩니다.

Components와 Profiler 패널이 그것인데요, 이 두 패널을 통해 React 애플리케이션의 구조와 렌더링 과정을 확인할 수 있습니다.

일반 DevTools의 Elements 탭이 DOM 구조를 보여준다면, React DevTools는 React 컴포넌트 구조를 보여준다는 점이 가장 큰 차이입니다.

 

Components 패널

React DevTools에서 가장 많이 사용하게 되는 패널입니다.

Components 패널을 열어 보면 현재 페이지에 렌더링된 컴포넌트들이 트리 형태로 나타납니다.

예를 들어 다음과 같은 구조라면

App
 └ Layout
    ├ Header
    └ Content
       ├ PostList
       └ PostItem

이 구조가 그대로 DevTools에 표시됩니다.

코드를 열지 않고도 현재 화면이 어떤 컴포넌트로 구성되어 있는지 바로 확인할 수 있습니다.

 

props와 state 확인

Components 패널에서 컴포넌트를 하나 선택해 보면 오른쪽 패널에 해당 컴포넌트의 정보가 표시됩니다.

대표적으로 다음 정보를 확인할 수 있습니다.

• props

• state

• hooks

이 기능은 디버깅할 때 꽤 유용합니다.

예를 들어 버튼이 비활성화되어 있을 때 코드를 따라가며 조건을 확인할 수도 있지만 DevTools에서 해당 컴포넌트를 선택하면 현재 props와 state 값을 바로 확인할 수 있습니다.

생각보다 많은 경우에 이 방법이 가장 빠릅니다.

 

Profiler

Components 패널이 현재 상태를 확인하는 데 유용하다면 Profiler는 렌더링 과정을 분석할 때 도움이 됩니다.

이 기능은 React 컴포넌트의 렌더링 과정을 기록해서 보여줍니다.

 

사용 방법은 단순합니다.

1. Profiler에서 Record 버튼을 누릅니다

2. 페이지에서 특정 동작을 수행합니다

3. 기록을 종료합니다

그러면 어떤 컴포넌트가 렌더링되었는지 확인할 수 있습니다.

특히 다음과 같은 상황에서 도움이 됩니다.

• 특정 컴포넌트가 자주 렌더링되는 경우

• UI가 느려지는 원인을 찾을 때

실제로 한 번은 특정 페이지에서만 렌더링이 유독 느려지는 문제가 있었습니다. 네트워크 문제처럼 보이지는 않았고, 체감상 컴포넌트 렌더링 문제에 가까웠습니다.

그래서 Profiler를 통해 여러 페이지의 렌더링을 비교해 보았고, 그 결과 흥미로운 점을 발견했습니다.

문제가 되는 페이지에서만 공통 컴포넌트의 렌더링 시간이 유독 길게 나타났습니다. 공통 컴포넌트인데 왜 이 페이지에서만 렌더링이 오래 걸리는걸까?

원인을 확인해 보니 해당 공통 컴포넌트 안에서 타이머 기능을 위해 requestAnimationFrame을 사용하는 로직이 있었습니다.

이 로직 안에서 시간 값을 state로 계속 업데이트하고 있었고, 그 과정에서 공통 컴포넌트의 재렌더링이 반복적으로 발생하고 있었습니다.

대부분의 페이지에서는 이 로직으로 인한 재연산 자체가 크게 문제되지 않았지만, 문제가 되었던 페이지에서는 복잡한 UI가 반복적으로 렌더링되어야 하는 로직이 함께 존재하고 있었고, 그 결과 공통 컴포넌트에서 발생하는 재렌더링이 페이지의 연산과 겹치면서 해당 페이지에서만 성능 문제가 나타났던 것으로 보였습니다. 해당 페이지의 시간 계산을 setTimeout으로 변경함으로써 문제를 해결할 수 있었습니다.

Profiler를 통해 페이지별 렌더링 시간을 비교하지 않았다면 이 문제의 원인을 찾는 데 훨씬 오래 걸렸을 것입니다.

 

마치며

React DevTools는 React를 처음 시작할 때는 크게 신경 쓰지 않게 되는 도구이기도 합니다.

하지만 프로젝트 규모가 조금만 커져도 DevTools를 열어보는 일이 자연스럽게 늘어나죠. 특히 props나 state 값을 빠르게 확인할 수 있다는 점 때문에 디버깅할 때 자주 들여다보는 습관을 들인다면 좋을것 같습니다.

React로 개발을 하고 있다면 DevTools에 있는 React 패널도 한 번쯤 천천히 살펴보는 것을 추천합니다. 생각보다 많은 정보를 확인할 수 있습니다.