📚 Reference

• 공식 문서 1

📜 Chapter

useDebugValue

• useDebugValue
• React 개발자 도구(React DevTools) 에서 사용자 정의 훅(Custom Hook) 의 디버깅을 돕기 위해 사용되는 훅이다.
• 이 훅은 사용자 정의 훅에 특정 값을 표시하는 라벨을 추가하여, 해당 훅의 내부 상태를 더 쉽게 파악할 수 있도록 해준다.

역할

• 기본적으로 React 개발자 도구는 내장 훅(useState, useReducer 등)의 상태만 보여준다.
• 그러나 useDebugValue를 사용하면 개발자가 만든 사용자 정의 훅에도 마치 내장 훅처럼 디버깅 값을 표시할 수 있게 된다.
• 예를 들어, 사용자 온라인 상태를 확인하는 useOnlineStatus라는 사용자 정의 훅이 있다고 가정해 본다.

예시

import { useState, useEffect, useDebugValue } from 'react';

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(true);

  // useDebugValue를 사용하여 개발자 도구에 표시할 값을 설정합니다.
  useDebugValue(isOnline ? '온라인' : '오프라인');

  useEffect(() => {
    // 온라인 상태를 감지하는 로직...
  }, []);

  return isOnline;
}

• 위 코드에서 useDebugValue 덕분에, React 개발자 도구의 컴포넌트 탭에서 useOnlineStatus 훅을 선택하면 true 또는 false와 같은 원시 값 대신 '온라인' 또는 '오프라인'이라는 더 읽기 쉬운 라벨을 볼 수 있다.