[React] useDebugValue

useDebugValue 란

React Hooks 중 하나로 개발자 도구 Dev Tools 에서 컴포넌트의 상태를 디버깅할 때 사용하는 함수이다.

사용법

useDebugValue 는 두개의 인자를 받음

첫번째 인자는 디버깅에 사용할 값(value)

두번째 인자는 옵션 객체이다.

예시

import { useDebugValue, useState } from 'react';

function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue);

  useDebugValue(count, count => `Count: ${count}`);

  function handleIncrement() {
    setCount(count + 1);
  }

  function handleDecrement() {
    setCount(count - 1);
  }

  return {
    count,
    handleIncrement,
    handleDecrement,
  };
}

useDebugValue 함수를 사용해서 count 값을 Count: ${count} 형태로 출력하도록함.

개발자 도구에서 해당 컴포넌트를 선택하면 확인할 수 있음.

이는 주로 커스텀 hooks에서 사용된다고함.