📚 Reference

📜 Chapter

react-devtools

React DevTools
React 애플리케이션을 검사하고, 디버깅하며, 분석하는 데 사용되는 개발자 도구이다.
이 도구는 브라우저 확장 프로그램 형태로 제공되며, 전통적인 웹 개발자 도구로는 React의 컴포넌트 기반 아키텍처를 효율적으로 다루기 어렵기 때문에 React 개발자에게 필수적인 도구이다.

displayName

displayName
React 컴포넌트에 사람이 읽을 수 있는 이름을 지정하는 데 사용되는 문자열 속성이다.
이 이름은 React DevTools의 컴포넌트 트리에서 컴포넌트를 식별할 때 표시된다.
displayName을 설정하면 React DevTools에서 컴포넌트 트리를 더 명확하게 볼 수 있어 복잡한 애플리케이션의 디버깅 효율을 크게 높일 수 있다. 이는 특히 여러 컴포넌트가 중첩되거나 재사용될 때 유용하다.

역할

기본적으로 React DevTools는 컴포넌트의 이름을 추론한다.
예를 들어, function MyComponent() {}와 같이 함수 이름을 명시하면 DevTools는 이 이름을 사용한다.
하지만 다음과 같은 상황에서는 displayName을 수동으로 설정하는 것이 유용하다.