[모던 리액트 Deep Dive] 6장

리액트 개발 도구 react-dev-tools

→ 리액트로 만들어진 다양한 애플리케이션을 디버깅하기 위해 만들어졌고 리액트 웹뿐만 아니라 리액트 네이티브 등 다양한 플랫폼에서도 사용 가능

 

웹 개발 환경에서 이 개발 도구를 사용하는 가장 편리한 방법은 브라우저 확장 프로그램을 사용하는 것!

 

리액트 개발 도구 설치

크롬, 파이어폭스, 엣지 브라우저를 지원하고 주로 개발하는 브라우저에 설치하면 된다

위처럼 리액트 로고가 회색으로 표시되면 리액트 개발 도구가 정상적으로 접근할 수 없는 페이지이거나 리액트로 개발되지 않은 페이지라는 뜻이다

리액트 로고가 빨간색으로 표시되면 개발 모드인 웹 애플리케이션에 정상적으로 리액트 개발 도구가 접근할 수 있다는 의미이다

개발 모드가 아니더라도 실데 프로덕션에 배포돼 있는 웹 애플리케이션을 방문해도 개발 도구 사용이 가능한데 이 경우에는 로고가 파란색으로 표시된다

 

 

개발 도구가 정상적으로 설치되고 디버깅할 수 있는 페이지에 접근했다면 크롬 개발자 도구에 두 가지 메뉴가 추가된다

Components와 Profiler

 

컴포넌트

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

컴포넌트 구조뿐만 아니라 props와 내부 hooks 등 다양한 정보 확인도 가능하다

 

컴포넌트 트리

Components의 왼쪽 영역은 해당 리액트 페이지의 컴포넌트 트리를 나타내는데 리액트 애플리케이션 전체의 트리 구조를 한눈에 보여준다

기명 함수로 선언된 컴포넌트라면 해당 컴포넌트명을 보여주고 익명 함수로 선언됐다면 Anonymous라는 이름으로 보여준다

 

컴포넌트를 기명 함수로 선언하는 것은 개발 도구에서 확인하는 데 많은 도움을 준다

함수를 기명 함수로 바꾸기 어렵다면 함수에 displayName 속성을 추가하는 방법이 있다

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

MemoizedComponent.displayName = '메모 컴포넌트'

익명 함수로 선언하기 곤란한 경우, 혹은 함수명과는 별도로 특별한 명칭을 부여해 명시적으로 확인이 필요한 경우 displayName을 사용하면 좋다

 

컴포넌트명과 props

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

 

컴포넌트명과 Key

컴포넌트의 명칭과 해당 컴포넌트를 나타낸다

컴포넌트 명칭은 Anonymous, 즉 익명 함수이며 key는 kidsValueProp이라고 하는 객체이다

 

컴포넌트 도구

컴포넌트 도구에는 3개의 아이콘이 있다

- 첫 번째 눈 아이콘을 누르면 해당 컴포넌트가 HTML의 어디에서 렌더링됐는지 확인 가능

- 두 번째 벌레 아이콘을 클릭하는 순간 콘솔 탭에 해당 컴포넌트의 정보가 console.log를 실행해 기록된 것 확인 가능

- 세 번째 소스코드 아이콘을 클릭하면 해당 컴포넌트의 소스코드 확인 가능

 

컴포넌트 props

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

단순한 원시값뿐만 아니라 함수도 포함돼 있다

 

컴포넌트 hooks

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

여기서 useState는 State와 같이 use가 생략된 이름으로 나타난다

 

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

해당 컴포넌트의 주체가 누구인지 확인할 수 있다

프로덕션 모드에서는 react-dom의 버전만 확인할 수 있지만 개발 모드에서는 해당 컴포넌트를 렌더링 한 부모 컴포넌트까지 확인할 수 있다

 

 

프로파일러

리액트가 렌더링하는 과정에서 발생하는 상황을 확인하기 위한 도구

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

이 메뉴는 렌더링 과정에 개입해 디버깅에 필요한 내용을 기록해야 하기 때문에 프로덕션 빌드로 실행되는 리액트 애플리케이션에서는 사용 불가

 

설정 변경하기

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

- Debugging 탭의 Hide logs during second render in Strict Mode: 엄격 모드에서 실행되는 경우, 원활한 디버깅을 위해 useEffect 등이 두 번씩 작동하는 의도적인 작동이 숨겨져 있는데 이를 막고 싶다면 해당 버튼 활성화

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

 

프로파일링

프로파일링 메뉴

리액트가 렌더링할 때 어떠한 일이 벌어지는지 확인할 수 있는 도구

- Start Profiling 버튼 : 이 버튼을 누르면 프로파일링 시작

- Reload and Start profiling 버튼 : 버튼 누르면 웹페이지가 새로고침되면서 이와 동시에 프로파일링 시작

- Stop Profiling 버튼 : 프로파일링 된 현재 내용을 모두 지우는 버튼으로 프로파일링 된 기록 모두 삭제 가능

- Load Profile 버튼, Save Profile 버튼 : 프로파일링 결과를 저장하고 불러오는 버튼

 

Flamegraph

렌더 커밋별로 어떠한 작업이 일어났는지 나타낸다

너비가 넓을수록 해당 컴포넌트를 렌덜이하는 데 오래 걸렸다는 것을 의미한다

렌더링이 가장 오래 걸리는 컴포넌트는 모든 컴포넌트를 렌더링해야 하는 루트 컴포넌트

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

오른쪽에 화살표 누르거나 세로 막대 그래프 클릭하면 각 렌더 커밋별로 리액트 트리에서 발생한 렌더링 정보 확인 가능

 

Ranked

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

모든 컴포넌트를 보여주는 것이 아니라 단순히 렌더링이 발생한 컴포넌트만 보여준다

 

 

타임라인

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

input에 글자를 입력하면서 state의 값이 업데이트되고 이 값이 동기로 업데이트됐는지, 언제 업데이트가 이뤄졌는지 등을 확인할 수 있다

시간의 흐름에 따라 리액트가 작동하는 내용을 추적하는 데 유용하다

 

 

리액트 개발 도구를 활용하면 정적으로 생성된 컴포넌트 트리를 보는 것에서부터 프로파일링을 통해 리액트 애플리케이션이 시간이 지남에 따라 어떤 식으로 작동하는지, 불필요한 리렌더링이 일어나고 있는지 등을 확인할 수 있다