6. 리액트 개발 도구로 디버깅하기

리액트 개발 도구 활용하기

컴포넌트

컴포넌트 트리

• 리액트 애플리케이션의 컴포넌트 트리를 확인한다.

• props와 내부 hooks 등을 확인할 수 있다.

• 익명 함수로 선언돼 있다면 Anonymous라는 이름으로 컴포넌트를 보여준다.

  • 따라서 기명 함수로 컴포넌트를 선언하면 개발 도구에서 명확히 확인할 수 있다.

  • displayName 속성을 추가할 수도 있다.

  • const MemoizedComponent = memo(function () {
      return <>MemoizedComponent</>;
    });
    
    MemoizedComponent.displayName = "메모 컴포넌트입니다.";

  • 빌드 도구, 난수화 등으로 인해 PRD에서는 확인이 어려워 개발모드에서만 참고하는 것이 좋다.

컴포넌트 명과 props

• 훅도 마찬가지로 훅에 넘겨주는 함수를 기명 함수로 넘겨주면 실행되는 함수 이름을 확인할 수 있다.

// before
useEffect(() => {
  console.log("useEffect");
});

// after
useEffect(function effectOnlyMount() {
  console.log("useEffect");
});

• rendered by
  • 해당 컴포넌트를 렌더링한 주체
  • 개발 모드에서는 부모 컴포넌트까지 확인할 수 있다.

프로파일러

• 리액트가 렌더링하는 과정에서 발생하는 상황을 확인하기 위한 도구
• 개발 모드에서만 확인이 가능하다.

6강은 실습 위주의 파트라 정리 양이 많지는 않습니다..