[React] 리액트 개발 도구를 활용해 좋은 웹 어플리케이션 만들기

디버깅은 프로그래밍에서 가장 중요한 요소중 하나다. 잘못된 동작을 찾아내는 것은 때론 간단하지만, 여러 라이브러리와 작성된 코드들이 섞인다면 잘못된 동작을 찾아내기란 사막에서 바늘 찾기다. 이때 활용할 수 있는 리액트 개발 도구에 대해 소개해보겠다.

리액트 개발 도구

리액트 개발 도구란?

리액트 팀에서 리액트 개발을 더 편리하게 돕기위해 만든 디버깅 툴이다. 리액트 개발도구는 브라우저의 확장 프로그램으로 만들어져있다.

크롬, 파이어폭스, 엣지를 지원하는데 나는 크롬을 사용하기에 크롬에 설치해보았다.

리액트 도구를 설치하고 난 후에 회색으로 뜬다면 리액트 개발 도구가 정상적으로 접근할 수 없는 페이지이거나 리액트로 개발되지 않은 페이지라는 뜻이고 리액트 로고가 정상적으로 표시된다면, 리액트 개발 도구가 웹 어플리케이션에 정상적으로 접근 할 수 있다는 뜻이다.

Components 탭 components 탭에서는 현재 리액트 애플리케이션의 컴포넌트 트리를 확인할 수 있다.

단순히 구조 뿐만 아니라 props와 hooks 등 다양한 정보를 제공한다.

컴포넌트 트리

기명 함수로 선언된 컴포넌트들은 컴포넌트명을 보여주고, 만약 익명 함수로 선언돼 있다면 Annoymous라는 이름으로 컴포넌트를 보여준다.

리액트 16.8 버전에는 다음과 같은 문제들이 있었는데 16.9로 넘어오면서 해결되었다.

익명 함수를 default로 export하면 AnonymousDefaultComponent의 경우 AnonymousDefaultComponent는 코드 내부에서 사용되는 이름의 범위, 실제로 default export로 내보낸 함수의 명칭은 추론할 수 없다. 따라서 _default로 표시된다.

memo를 사용할 이유로 함수로 만든 컴포넌트를 감싼 경우, 함수형 함수를 줄이지 않고 memo 캐싱을 통해 memo로 감싼지 결과물을 측정했지만 Anonymous로 표시된다. 추가로 memo 캐싱을 통해 memo로 감싼지 결과물은 유의할 수 있다.

고자 컴포넌트들이 withSampleHOC로 감싼 HOCcomponent의 경우 두 가지 모두 Anonymous로 식별될 수 있다. 이 또한 고자 컴포넌트들의 명칭을 제대로 추론하지 못하기 때문이다.

그리고 또한 익명 함수를 기명 함수로 바꾸기 어려운 상황이라면 함수에 displayName 속성을 추가할 수 있다.

``` const MemoizedComponent = memo(function() { return <>MemoizedComponent })

MemoizedComponent.displayName = '메모 컴포넌트 입니다." ```

컴포넌트명과 props

컴포넌트 트리에서 컴포넌트를 선택했을때 해당 컴포넌트에 대한 자세한 정보를 보여주는 영역이다.

1. 컴포넌트명과 Key

위 사진의 컴포넌트의 경우 명칭은 Annoymous 이며 key는 kidsValueProp이라고 하는 객체이다. 빨간색 경고 이모티콘은 해당 애플리케이션이 strict mode로 렌더링되지 않았다는 것을 의미한다.

2. 컴포넌트 도구

3가지 아이콘이 있다.

첫 번째 아이콘은 해당 컴포넌트가 어디에서 렌더링 됐는지 확인할 수 있다. 버튼을 누르면 바로 요소탭으로 이동하며, 해당 컴포넌트가 렌더링한 HTML 요소가 선택된다.

두번째 벌레 아이콘을 누른다면, 콘솔 탭에 해당 컴포넌트의 정보가 출력되는 것을 볼 수 있다.

세번째 아이콘을 누른다면 해당 컴포넌트의 소스코드를 확인할 수 있다.

3. 컴포넌트 프롭스

해당 컴포넌트가 받은 프롭스를 확인할 수 있다. 단순히 원시값뿐 아니라 함수도 포함되어있다.

4. 컴포넌트 hooks

컴포넌트에서 사용 중인 훅 정보를 확인할 수 있다. use가 생략돼서 나온다.

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

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

해당 컴포넌트를 렌더링한 부모 컴포넌트까지 확인 가능하다.

프로파일러

컴포넌트 메뉴가 정적인 리액트 컴포넌트 트리의 내용을 디버깅위한 도구라면 프로파일러는 리액트가 렌더링하는 과정에서 발생하는 상황을 확인하기 위한 도구다.

어떤 컴포넌트가 렌더링됐는지, 또 몇 차레 렌더링 됐는지, 어디서 오래 걸렸는지 등을 알 수 있다.

렌더링 과정을 기록해야 하기 때문에 프로덕션 빌드로 실행되는 리액트 애플리케이션에서 사용할 수 없다. 그렇기 때문에 개발 모드로 실행되는 애플리케이션을 준비해야 한다.

설정

- Highlight updates when components render: 컴포넌트가 렌더링될 때마다 해당 컴포넌트에 하이라이트를 표시한다.

디버깅 탭에 Hide logs during second render in Strict Mode: 리액트 애플리케이션이 엄격 모드로 실행되는 경우, uesEffect 등이 두 번씩 작동하는 의도적인 작동이 숨겨져있다. 이름 막기 위해서는 해당 기능을 활성화하면 된다.

프로파일 탭에 Record why component rendered while profiling: 프로파일링 도중 무엇 때문에 컴포넌트가 렌더링됐는지 기록한다.

프로파일링

프로파일링 메뉴

두 번째 버튼: 새로고침 후 프로파일링 시작 버튼

세 번째 버튼: 프로파일링 종료 버튼, 프로파일링된 현재 내용을 모두 지우는 버튼이다.

네 번째 버튼: 프로파일 불러오기

다섯 번째 버튼: 프로파일 저장하기 버튼으로 JSON 파일이 다운되며 이를 네번째 버튼으로 다시 불러올 수 있다.

Flamegraph

불꽃 모양 탭에서는 렌더 커밋별로 어떤 작업이 일어났는지 나타낸다. 각 컴포넌트에 마우스 커서를 가져다 대면 렌더링과 관련된 정보를 확인할 수 있다.

마우스 커서를 가져다 대면 확인할 수 있는 렌더링 정보 이외에도 오른쪽에는 해당 커밋과 관련된 추가적인 정보를 확인할 수 있다.

어떤 컴포넌트가 렌더링이 얼마나 걸렸는지 확인할 수 있고, 렌더링되지 않은 컴포넌트에 대한 정보도 확인할 수 있다.

렌더링 되지 않은 컴포넌트는 회색으로 표시된다. 이를 활용하면 의도대로 메모이제이션이 작동하고 있는지, 혹은 특정 상태 변화에 따라 렌더링이 의도대로 되는지 대해 알 수 있다.

Ranked

해당 커밋에서 렌더링하는 데 오랜 시간이 걸린 컴포넌트를 순서대로 나열한 그래프다.

타임라인

타임라인에서는 시간이 지남에 따라 컴포넌트에서 어떤 일이 일어났는지를 확인할 수 있다.

타임라인은 리액트 18 이상에서만 확인 가능하다.