useDebugValue는 React Developer Tools 내에서 커스텀 훅의 내부 논리에 대한 자세한 정보를 제공하는 빌트인 훅입니다. useDebugValue는 커스텀 훅을 디버깅할 때 훨씬 더 나은 디버깅 경험을 제공합니다.
<aside> 💡 디버그(debug)란? 디버그(debug) 혹은 디버깅(debugging)은 개발 단계 중에 발생하는 시스템의 논리적인 오류를 찾아내고, 그 원인을 밝히고 수정하는 작업 과정을 일컫습니다.
</aside>
useDebugValue는 다음과 같은 형식으로 사용합니다.
useDebugValue(debugValue)
// 또는
useDebugValue(debugValue, debugValue => debugValue.toString());
React Developer Tools 내에서 디버그 값을 표시할 때, 형식을 지정하는 것이 비용이 많이 드는 작업일 경우일 수 있습니다. 커스텀 훅이 검사되지 않는 한, 형식을 지정하는 작업이 불필요하기 때문에, useDebugValue의 두 번째 인자로 함수를 선택적으로 전달할 수 있습니다.
React에서는 주로 props와 state를 통해 실수의 원인을 추적합니다. props와 state를 추적하여 어떤 컴포넌트에서 문제가 발생하는지 확인할 수 있다면, 다른 문제 원인과 분리할 수 있습니다. 이렇게 다른 문제와 분리할 수 있다면, 문제 발생 원인을 더욱 쉽게 발견할 수 있다는 장점이 있습니다. 따라서, 문제가 발생했을 때 코드 베이스(Codebase)로 인한 실수의 원인을 추적할 수 있도록 환경을 만드는 것은 중요합니다.
개발 시 화면에서 렌더링 문제가 발생했을 경우, React Developer Tools를 사용하여 어떤 props 혹은 state에서 문제가 발생했는지를 확인할 수 있습니다. React Developer Tools를 사용하는 방법에 알아보기 위해, 먼저 React Developer Tools를 설치하는 방법에 대해 알아보도록 하겠습니다.