[모던 리액트 딥다이브] 6장 리액트 개발 도구

리액트 개발 도구란?

• 리액트 팀은 리액트 애플리케이션의 원활한 개발을 위한 개발 도구인 react-dev-tools를 만들어 제공함
• 리액트로 만들어진 다양한 애플리케이션을 디버깅하기 위해 만들어짐
• 브라우저 확장 프로그램을 사용해 사용할 수 있음

 

Components 탭

• 리액트 애플리케이션의 컴포넌트 트리 확인 가능
• 컴포넌트의 구조뿐만 아니라 props와 내부 hooks 등 다양한 정보 확인 가능
• 정보
  • 컴포넌트 트리
    • 해당 리액트 페이지의 컴포넌트 트리를 나타냄
    • 기명 함수로 선언된 컴포넌트는 해당 컴포넌트명을, 익명 함수로 선언돼 있다면 Anonymous라는 이름으로 컴포넌트를 보여줌
    • 명확하게 컴포넌트를 확인하려면 기명 함수로 선언하는 것이 개발 도구에서 확인하는 데 많은 도움을 줌
    • 혹은 displayName 속성을 추가할 수 있음 (고차 컴포넌트는 일반적으로 고차컴포넌트와 일반 컴포넌트의 조합으로 구성되므로 displayName을 잘 설정하면 디버깅하는데 많은 도움이 됨)
  • 컴포넌트명과 props
    • 왼쪽 컴포넌트 트리에서 컴포넌트를 선택했을 때 해당 컴포넌트에 대한 자세한 정보를 보여주는 영역
    • 컴포넌트명과 key
      • 컴포넌트의 명칭과 해당 컴포넌트를 나타냄
    • 컴포넌트 도구
      • 눈 아이콘 : 해당 컴포넌트가 HTML의 어디에서 렌더링됐는지 확인 가능. 누르는 즉시 크롬 개발 도구의 메뉴 중 하나인 요소 탭으로 이동하며, 해당 컴포넌트가 렌더링한 HTML 요소가 선택되는 것을 볼 수 있음
      • 벌레 아이콘 : 클릭하는 순간 콘솔 탭에 해당 컴포넌트의 정보가 console.log를 실행해 기록됨. 여기에는 해당 컴포넌트가 받는 props, 컴포넌트 내부에서 사용하는 hooks, 해당 컴포넌트의 HTML 요소인 nodes가 기록됨
      • 소스코드 아이콘 : 해당 컴포넌트의 소스코드 확인 가능. {} 버튼을 누르면 난독화된 코드를 읽고, 디버깅할 때 매우 유용하게 사용 가능
    • 컴포넌트 props
      • 해당 컴포넌트가 받은 propss를 확인할 수 있음
      • 단순한 원시값뿐 아니라 함수도 포함돼 있음
    • 컴포넌트 hooks
      • 컴포넌트에서 사용 중인 훅 정보 확인 가능
      • State : useState
      • Reducer : useReducer
      • Context : useContext
      • Memo : useMemo
      • Callback : useCallback
      • Ref : useRef
      • id : useId
      • LayoutEffect : useLayoutEffect
      • Effect : useEffect
      • 사용자 정의 훅
    • 컴포넌트를 렌더링한 주체, rendered by
      • 해당 컴포넌트를 렌더링한 주체가 누구인지 확인 가능

 

Profiler 탭

• 리액트가 렌더링하는 과정에서 발생하는 상황을 확인하기 위한 도구
• 리액트 애플리케이션이 렌더링되는 과정에서 어떤 컴포넌트가 렌더링됐는지, 또 몇 차례나 렌더링이 일어났으며 어떤 작업에서 오래 걸렸는지 등 컴포넌트의 렌더링 과정에서 발생하는 일을 확인할 수 있음
• 프로덕션 빌드로 실행되는 리액트 애플리케이션에서는 사용할 수 없음 => 개발 모드 리액트 애플리케이션만 가능
• 정보
  • Flamegraph
    • 렌더 커밋별로 어떠한 작업이 일어났는지 나타냄
    • 너비가 넓을수록 해당 컴포넌트를 렌더링하는 데 오래 걸렸다는 의미
    • 회색 : 아예 렌더링되지 않은 컴포넌트
    • 녹색 : 빠르게 렌더링된 컴포넌트
    • 노란색 : 렌더링에 오래 걸린 컴포넌트
  • Ranked
    • 해당 커밋에서 렌더링하는 데 오랜 시간이 걸린 컴포넌트를 순서대로 나열한 그래프
    • 단순히 렌더링이 발생한 컴포넌트만 보여줌
  • Timeline
    • 시간이 지남에 따라 컴포넌트에서 어떤 일이 일어났는지 확인할 수 있음
    • 업데이트 과정, 동기로 됐는지, 언제 업데이트가 일어났는지 등을 확인할 수 있음
    • 시간 단위로 프로파일링 기간 동안 무슨 일이 일어났는지, 무엇이 렌더링됐고, 또 어떤 시점에 렌더링됐는지, 리액트의 유후 시간은 어느 정도였는지 등을 자세히 확인 가능