[react 번역] useDebugValue

출처: https://react.dev/reference/react/useDebugValue

개요

useDebugValue는 커스텀 Hook에 대해 React DevTools에서 표시되는 레이블(디버그 값)을 추가할 수 있게 해주는 React Hook입니다.

useDebugValue(value, format?)

커스텀 Hook의 최상위에서 useDebugValue를 호출하면, React DevTools에서 읽기 쉬운 디버그 값을 표시할 수 있습니다.

import { useDebugValue } from 'react';

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

value: React DevTools에 표시하고 싶은 값. 어떤 타입이든 가능.
format(선택): 포매팅 함수. 컴포넌트가 DevTools에서 검사될 때, 이 함수가 value를 인자로 받아 반환한 값을 표시합니다. 지정하지 않으면 value 자체가 표시됩니다.

공유 라이브러리의 커스텀 Hook이나 내부 구조가 복잡한 Hook에 디버그 값을 추가하면, React DevTools에서 Hook을 사용하는 컴포넌트를 검사할 때 더 읽기 쉬운 정보를 볼 수 있습니다.

import { useDebugValue } from 'react';

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

이렇게 하면 React DevTools에서 해당 Hook을 사용하는 컴포넌트에 OnlineStatus: "Online"과 같은 레이블이 표시됩니다. useDebugValue를 사용하지 않으면 내부 데이터(예: true/false)만 표시됩니다.

참고: 모든 커스텀 Hook에 디버그 값을 추가할 필요는 없습니다. 여러 곳에서 재사용되거나, 내부 구조가 복잡한 Hook에만 사용하는 것이 좋습니다.

두 번째 인자로 포매팅 함수를 전달하면, DevTools에서 컴포넌트를 검사할 때만 포매팅 함수가 실행됩니다. (비싼 연산을 매 렌더마다 실행하지 않아도 됨)

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

이렇게 하면 date가 Date 객체일 때, DevTools에서만 toDateString()이 호출되어 사람이 읽기 쉬운 문자열로 표시됩니다.

출처: https://react.dev/reference/react/useDebugValue