[Hook] useDebugValue

리액트 공식 문서를 참고한 정리 내용 (25.08 기준)

개발자가 개발자 도구에서 더 쉽게 이해하도록 표시를 붙여주는 기능을 담당하는 훅이다.

즉, 커스텀 훅의 상태를 React DevTools에 표시해주는 도구이며 디버깅할 때 유용하다.

커스텀 Hook에 라벨 추가하기

import { useDebugValue } from 'react';

function useOnlineStatus() {
  // ...
  useDebugValue(isOnline ? 'Online' : 'Offline');
  // ...
}

커스텀 Hook의 최상위 레벨에서 useDebugValue를 호출하면, 해당 Hook을 호출하는 컴포넌트를 검사할 때, OnlineState: "Online"와 같은 라벨이 붙는다.

단, 모든 커스텀 Hook에 사용하는 것보다 내부 구조가 복잡하여 상태의 흐름을 파악하기 어렵거나, 검사가 어려운 커스텀 Hook에만 적용하는 것이 가장 유리하다.

---

디버그 값의 포맷팅 지연하기

두 번쨰 인자로 포맷팅 함수를 전달할 수 있다.

useDebugValue(date, date => date.toDateString());

useDebugValue에 포맷팅 함수를 두 번째 인자로 주면, React DevTools에서 해당 컴포넌트를 클릭해 열어볼 때만 그 함수를 실행해서 사람이 보기 좋은 값으로 바꿔 보여준다.

예를 들면, date = 원래 값 (예: 2025-08-20T12:34:56.000Z)을 포맷팅 함수를 실행헤 Wed Aug 20 2025 같은 보기 좋은 문자열로 표시된다.