React 개발자 도구에서 사용자 정의 Hook에 레이블을 추가할 수 있는 React Hook

useDebugValue(value, format?)

---

Reference

useDebugValue(value, format?)

사용자 정의 Hook의 최상위 수준에서 useDebugValue를 호출하여 읽을 수 있는 debug 값을 표시함:

import { useDebugValue } from 'react';

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

Parameters

• value: React 개발자 도구에 표시할 값. 모든 타입을 가질 수 있음.

• format(optional): formatting 함수. 컴포넌트를 검사할 때 React 개발자 도구는 value를 인수로 formatting 함수를 호출한 다음 포맷팅된 반환값(모든 타입을 가질 수 있음)을 표시함. Formatting 함수를 지정하지 않으면 원래 value 자체가 표시됨.

Returns

아무것도 반환하지 않음.

---

Usage

Adding a label to a custom Hook

사용자 정의 Hook의 최상위 수준에서 useDebugValue를 호출하여 React 개발자 도구에서 읽을 수 있는 debug 값을 표시함.

import { useSyncExternalStore, useDebugValue } from 'react';

export function useOnlineStatus() {
  const isOnline = useSyncExternalStore(subscribe, () => navigator.onLine, () => true);
  useDebugValue(isOnline ? 'Online' : 'Offline');
  return isOnline;
}

이렇게 하면 useOnlineStatus를 호출하는 컴포넌트를 검사할 때 OnlineStatus: "Online"과 같은 레이블이 지정됨:

useDebugValue 호출이 없으면 기본 데이터(이 예제에서는 true)만 표시됨.

Note

모든 사용자 정의 Hook에 debug 값을 추가하지 말 것. 이 기능은 공유 라이브러리의 일부이면서 검사하기 어려운 복잡한 내부 데이터 구조를 가진 사용자 정의 Hook에 가장 유용함.

Deferring formatting of a debug value

또한 useDebugValue의 두 번째 인수로 formatting 함수를 전달할 수도 있음:

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

Formatting 함수는 debug 값을 매개변수로 받고 포맷팅된 display 값을 반환해야 함. 컴포넌트가 검사되면 React 개발자 도구는 이 함수를 호출하고 그 결과를 표시함.

이렇게 하면 컴포넌트가 실제로 검사되지 않는 한 잠재적으로 비용이 많이 드는 포맷팅 로직을 실행하지 않아도 됨. 예를 들어 날짜가 Date 값인 경우, 렌더링할 때마다 toDateString()을 호출하지 않아도 됨.