[Hooks] useDebugValue | useDebugValue 훅

useDebugValue는 리액트 DevTools에서 커스텀훅에 라벨을 추가해주는 훅이에요.

useDebugValue(value, format?)

 

---

Reference

useDebugValue(value, format?)

읽을 수 있는 디버깅 값을 보여주려면 커스텀훅의 최상위에서 useDebugValue를 호출하세요.

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

 

Parameters | 파라미터(매개변수)

• value : 리액트 DevTools에서 보여주고 싶은 값. 어떤 타입의 값을 넣어도 된다.
• format (선택적) : 포맷팅을 해주는 함수. 컴포넌트가 검사될 때, 리액트 DevTools는 인자로 value를 받는 포맷팅 함수를 호출해요. 그리고 (타입 상관 없이) 반환받은 포맷된 값을 보여줘요. 만약 포맷팅 함수를 정하지 않았다면 원본 value 자체가 보여질 거예요.

Returns | 반환값

useDebugValue는 아무것도 반환하지 않아요.

---

Usage | 용법

Adding a label to a custom Hook | 커스텀 훅에 라벨 추가하기

리액트 DevTools에서 읽을 수 있는 디버깅 값을 보여주려면 커스텀 훅의 최상위에서 useDebugValue를 호출하세요.

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

 

여기서 useDebugValue는 useOnlineStatus를 호출한 컴포넌트를 검사할 때, OnlineStatus: "Online"과 같은 라벨을 추가해줘요.

출처 : https://react.dev/reference/react/useDebugValue#adding-a-label-to-a-custom-hook

 

useDebugValue가 없다면 원본 데이터(이 예시에서는 true)만 보여질 거예요.

 

예시 코드 보러가기

 

노트
모든 커스텀 훅에 디버그 값을 넣지는 마세요. 라이브러리의 일부를 공유하거나 검사가 어려운 복잡한 내부적 자료구조를 갖고 있는 커스텀훅에 가장 유용해요.

 

Deferring formatting of a value | 값의 포맷팅 연기하기

useDebugValue의 두번째 인자로 포맷팅 함수를 전달할 수도 있어요.

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

 

포맷팅 함수는 파라미터로 디버깅 값을 받고 보여줄 값을 포맷팅한 상태로 반환할 거예요. 컴포넌트가 검사될 때, 리액트 DevTools는 이 함수를 호출하고 이 함수의 값을 보여줄 거예요.

 

이는 컴포넌트가 실제로 검사되지 않는 한 잠재적으로 비용이 드는 포맷팅 로직을 피하게 해줘요. 예를 들어 만약 date가 Date 값이라면 toDateString()은 렌더링 될 때마다 호출되지는 않아요.