useDebugValue

 

🎯 useDebugValue란 무엇일까?

**useDebugValue**는 React 개발자 도구(React DevTools)에서 커스텀 훅을 더 쉽게 디버깅할 수 있도록 도움을 주는 도구예요.

• 커스텀 훅이란?
  여러 React 훅(useState, useEffect 등)을 조합해서 나만의 훅을 만드는 거예요.
  예를 들면 useUserData, useFetchData 같은 것들이요.

**useDebugValue**를 사용하면 이 커스텀 훅이 어떤 값을 반환하는지를 React 개발자 도구에서 한눈에 확인할 수 있어요.
디버깅할 때 아주 유용하답니다! 🔍

 

📦 택배 상자 이야기로 이해해보기

커스텀 훅은 마치 택배 상자 같아요. 📦

• 택배 상자(커스텀 훅) 안에 뭐가 들어있는지 겉으로는 보이지 않아요.
• 하나씩 열어보면서 확인해야 하는데, 상자가 많아지면 힘들겠죠?

useDebugValue를 사용하면 상자에 라벨을 붙이는 것처럼,
React 개발자 도구에 **"이 상자 안에는 이런 값이 들어있어요"**라고 표시해줘요.

 

🛠️ useDebugValue 코드 예시

예를 들어, 사용자 정보를 가져오는 커스텀 훅 useUser를 만들어 볼게요.

import React, { useState, useEffect, useDebugValue } from "react";

// 커스텀 훅: 사용자 데이터를 가져오는 훅
function useUser(userId) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 사용자 데이터를 가져오는 비동기 함수
    fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
      .then((response) => response.json())
      .then((data) => setUser(data));
  }, [userId]);

  // useDebugValue를 사용해 React DevTools에 표시할 값 설정
  useDebugValue(user ? `User: ${user.name}` : "Loading...");

  return user;
}

// 컴포넌트
function UserProfile({ userId }) {
  const user = useUser(userId); // 커스텀 훅 사용

  return (
    <div>
      {user ? (
        <p>사용자 이름: {user.name}</p>
      ) : (
        <p>사용자 정보를 불러오는 중...</p>
      )}
    </div>
  );
}

export default UserProfile;

 

🔍 코드에서 무슨 일이 일어날까?

1. 커스텀 훅 useUser
   • 사용자의 데이터를 불러오고 useState로 상태를 관리해요.
2. useDebugValue
   • React 개발자 도구에 현재 사용자 정보의 상태를 표시해줘요.
   • user가 있을 때는 User: 사용자 이름,
     아직 데이터를 가져오는 중이면 Loading... 라고 표시됩니다.
3. React 개발자 도구에서 확인하기
   • React DevTools를 열어보면 useUser 훅이 어떤 값을 반환하는지 쉽게 확인할 수 있어요.
   • 디버깅이 훨씬 간편해지겠죠? 😊

 

🚀 왜 사용할까?

1. 커스텀 훅이 많아질수록 어떤 훅이 어떤 데이터를 반환하는지 파악하기 어려워져요.
2. React 개발자 도구에 현재 훅의 상태를 명확하게 표시해서 디버깅 시간을 줄여줘요.

 

🌟 한 줄 요약

useDebugValue는 커스텀 훅의 값을 React 개발자 도구에 표시해주는 도구예요. 디버깅할 때 아주 유용해요!