useDebugValue는 React DevTools에서 커스텀 훅에 라벨을 추가할 수 있게 해주는 hook이다.
useDebugValue(value, format?)
레퍼런스
읽을 수 있는 디버그 값을 표시하기 위해 커스텀 Hook의 최상위에서 호출을 한다.
import { useDebugValue } from 'react';
function useOnlineStatus() {
// ...
useDebugValue(isOnline ? 'Online' : 'Offline');
// ...
}
매개변수로는
- value : React DevTools에 표시하고 싶은 값이다. 어떤 타입이든 될 수 있다.
- 선택사항 format : 포맷팅 함수이다.
반환값은 없다.
사용법
커스텀 Hook에 라벨 추가하기
읽을 수 있는 디버그 값을 표시하기 위해 커스텀 Hook의 최상위 레벨에서 useDebugValue를 호출.
import { useDebugValue } from 'react';
function useOnlineStatus() {
// ...
useDebugValue(isOnline ? 'Online' : 'Offline');
// ...
}
이렇게 하면 useOnlineStatus를 호출하는 컴포넌트를 검사할 때, OnlineStatus : "Online" 같은 라벨이 붙는다.

주의할점은 모든 커스텀 Hook에 디버그 값을 추가하지는 않아야 한다.
디버그 값의 포맷팅 지연하기
useDebugValue의 두 번째 인자로 포맷팅 함수를 전달할 수 있다.
useDebugValue(date, date => date.toDateString());
포맷팅 함수는 디버그 값을 인자로 받고, 포맷팅된 표시 값을 반환해야 한다.
이는 컴포넌트가 실제로 검사될 때까지 높은 비용이 들 수 있는 포맷팅 로직을 실행하지 않도록 해줍니다. 예를 들어, date가 Date 값이라면, 이는 렌더링마다 toDateString()을 호출하는 것을 피할 수 있습니다.
'리액트 공식문서 읽어보기' 카테고리의 다른 글
| useId (0) | 2024.03.07 |
|---|---|
| useDeferredValue (0) | 2024.03.06 |
| useCallback (0) | 2024.03.02 |
| <Suspense> (1) | 2024.02.25 |
| lazy (0) | 2024.02.25 |