React Hook : useDebugValue()

useDebugValue()는 React Hook의 하나로, 개발자가 커스텀 Hook을 만들때, Hook의 내부 상태나 props를 디버깅할 수 있도록 도와줍니다.

React 18 이전까지는, Hook 내부의 값을 확인하려면 보통 console.log()를 사용했었습니다. 하지만 이 방법은 코드의 가독성을 떨어뜨리고, 복잡한 디버깅 과정을 유발할 수 있습니다.

이 때 useDebugValue()를 사용하면 Hook 내부의 상태값을 좀 더 쉽게 디버깅할 수 있습니다. 이 Hook은 React DevTools와 연계하여 사용되며, 디버깅 정보를 개발자 도구에서 확인할 수 있도록 해줍니다.

아래는 간단한 예시 코드입니다.

import { useState, useDebugValue } from 'react';

function useCustomHook(initialValue) {
  const [value, setValue] = useState(initialValue);

  useDebugValue(value); // 디버깅 정보 제공

  const updateValue = (newValue) => {
    setValue(newValue);
  };

  return [value, updateValue];
}

위 코드에서 useCustomHook()이라는 커스텀 Hook을 만들고 있습니다. 이 Hook은 useState()를 사용하여 내부 상태값을 관리하고 있습니다.

useDebugValue()는 useState()와 같이 Hook 내부에서 사용됩니다. 여기서는 value라는 상태값을 useDebugValue()의 매개변수로 전달하고 있습니다. 이렇게 하면, 개발자 도구에서 해당 Hook을 사용하는 컴포넌트의 상태값이 어떻게 바뀌는지 쉽게 확인할 수 있습니다.

React 18에서는 useDebugValue()에 추가적인 기능이 추가되었습니다. 이제 useDebugValue()에 함수를 전달하여, 상태값을 가공하거나, 더 자세한 정보를 제공할 수 있습니다. 아래는 이에 대한 예시 코드입니다.

import { useState, useDebugValue } from 'react';

function useCustomHook(initialValue) {
  const [value, setValue] = useState(initialValue);

  const formattedValue = `$${value.toFixed(2)}`;

  useDebugValue(formattedValue, (formattedValue) => {
    return { formattedValue, length: formattedValue.length };
  });

  const updateValue = (newValue) => {
    setValue(newValue);
  };

  return [value, updateValue];
}

위 코드에서 useDebugValue()에 함수를 전달하고 있습니다. 이 함수는 useDebugValue()의 첫 번째 매개변수로 전달된 값을 가공하고, 더 자세한 정보를 제공합니다. 이 함수의 반환값은 개발자 도구에서 확인할 수 있습니다.

따라서, 이 코드에서는 formattedValue와 length를 반환하는 함수를 사용하여, 개발자 도구에서 상태값의 길이와 가공된 값을 확인할 수 있습니다.

React 18에서는 useDebugValue()의 두 번째 매개변수로 options 객체를 전달할 수 있습니다. 이 객체를 사용하면, 개발자 도구에서 추가적인 정보를 제공하거나, 디버깅 정보를 더욱 세부적으로 제어할 수 있습니다.

옵션 객체의 프로퍼티는 다음과 같습니다.

• formattedValue: 개발자 도구에서 표시될 값입니다. 이 값을 제공하지 않으면, useDebugValue()의 첫 번째 매개변수로 전달된 값이 표시됩니다.

• severity: 디버깅 정보의 심각도를 나타냅니다. 이 값은 "info", "warning", "error" 중 하나를 사용할 수 있습니다. 이 값을 지정하면, 해당 정보가 개발자 도구에서 강조되거나, 다른 색상으로 표시될 수 있습니다.

• skip: 해당 Hook을 디버깅할 때, 일부 컴포넌트에서는 이 값을 제공하지 않도록 설정할 수 있습니다. 이 값을 설정하면, 해당 컴포넌트에서는 디버깅 정보가 표시되지 않습니다.

• label: 개발자 도구에서 디버깅 정보의 레이블을 설정할 수 있습니다. 이 값을 설정하면, 해당 정보가 어떤 상태값을 나타내는지 명확하게 표시됩니다.

아래는 이에 대한 예시 코드입니다.

import { useState, useDebugValue } from 'react';

function useCustomHook(initialValue) {
  const [value, setValue] = useState(initialValue);

  const formattedValue = `$${value.toFixed(2)}`;

  useDebugValue(formattedValue, {
    label: 'Formatted value',
    severity: 'info',
  });

  const updateValue = (newValue) => {
    setValue(newValue);
  };

  return [value, updateValue];
}

위 코드에서는 useDebugValue()의 두 번째 매개변수로 options 객체를 전달하고 있습니다. 이 객체의 label 프로퍼티에는 "Formatted value"라는 레이블을 설정하고 있으며, severity 프로퍼티에는 "info"라는 값이 설정되어 있습니다. 이렇게 하면, 해당 디버깅 정보가 개발자 도구에서 어떻게 표시될지를 조절할 수 있습니다.

따라서, useDebugValue()는 커스텀 Hook을 만들 때, 디버깅 과정을 보다 쉽게 만들어주는 기능입니다. 이 Hook을 사용하면, Hook 내부의 상태값을 개발자 도구에서 쉽게 확인하고, 더욱 세부적인 디버깅 정보를 제공할 수 있습니다.

내저장소 바로가기 luxury515