“hooks 내에 label 붙이기”
useDebugValue 는 React 개발자 도구에서 커스텀 훅에 레이블을 추가해주는 React 훅이다.
참조
useDebugValue(value, format?)
읽을 수 있는 디버그 값을 표시하려면 커스텀 훅의 최상위 레벨에서
useDebugValue을 호출합니다.import { useDebugValue } from 'react'; function useOnlineStatus() { // ... useDebugValue(isOnline ? 'Online' : 'Offline'); // ... }
매개변수
value: React 개발자 도구에서 표시하려는 값, 모든 유형 가능
format(optional): Formatting 함수.
컴포넌트가 검사할 때, React 개발자 도구는 인수로 포매팅 함수를 호출한 다음 반환된 포매팅된 값(모든 유형을 가질 수 있음)을 표시한다. 포매팅 함수를 지정하지 않으면, 원본
value 자체가 표시된다.반환값
없음!
사용법
1. 커스텀 훅에 레이블 추가
커스텀 훅의 최상위 레벨에서
useDebugValue를 호출하여 React 개발자 도구가 읽을 수 있는 디버그 값을 표시한다.import { useDebugValue } from 'react'; function useOnlineStatus() { // ... useDebugValue(isOnline ? 'Online' : 'Offline'); // ... }
이렇게 하면 검사할 때 컴포넌트는
useOnlineStatus를 OnlineStatus: "Online" 같은 레이블을 호출한다.
useDebugValue 호출이 없으면 기본 데이터(예시에서는 true)만 표시다.Note
모든 커스텀 훅에 디버그 값을 추가하지 마십시오.
공유 라이브러리의 일부이고 검사하기 어려운 복잡한 내부 데이터 구조를 가진 커스텀 훅에 가장 유용하다.
2. 디버그 값의 형식 지정 연기
useDebugValue의 두번째 인수에 포매팅 함수를 전달할 수도 있다.useDebugValue(date, date => date.toDateString());
포매팅 함수는 디버그 값을 매개변수로 받고 변환된 값을 반환해야 한다. 컴포넌트가 검사할 때, React 개발자 도구가 이 함수를 호출하고 그 결과를 표시한다.
이렇게 하면 컴포넌트를 실제로 조사하지 않는 한, 비용이 많이 들 수 있는 포매팅 로직을 실행하지 않아도 된다. 예를 들어,
date가 날짜 값인 경우, 컴포넌트를 렌더링 할 때마다 toDateString()을 호출하지 않는다.