[React] 커스텀 훅(Custom Hook)

 

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다.

 

React를 사용하다 보면 컴포넌트마다 비슷한 로직이 반복되는 경우가 많습니다.

예를 들어, 데이터를 가져오기 위해 useEffect 안에서 fetch 요청을 보내고, loading 상태와 error 상태를 관리하는 코드를 여러 컴포넌트에서 반복하게 되기도 합니다.

이럴 때 유용하게 사용할 수 있는 것이 바로 "커스텀 훅(Custom Hook)" 입니다.

 

🎈 먼저, 리액트 훅의 두 가지 규칙부터 다시 복습!

1. 리액트 훅은 컴포넌트 함수 또는 다른 훅 안에서만 사용 가능
   • 일반 함수에서는 사용 불가능합니다.
2. 훅은 조건문, 반복문, 중첩 함수 안에서 호출하면 안 됨

---

 

🎈 커스텀 훅이 필요한 이유

• 중복되는 훅 로직을 재사용하기 위해
• 상태(useState)나 사이드 이펙트(useEffect) 같은 훅을 포함한 로직을 분리하여 깔끔하게 유지
• JSX를 반환하지 않는 순수한 로직은 컴포넌트로 분리할 수 없기 때문에, 커스텀 훅으로 처리
• 동일한 훅 로직을 다양한 컴포넌트에서 사용 가능
• 설정에 따라 유연하게 동작을 바꿀 수 있도록 설계할 수 있음

---

 

 

🎈 예시: 데이터를 fetch하는 커스텀 훅

아래는 useFetch라는 커스텀 훅의 예시입니다.

이 훅은 fetch 함수와 초기값을 인자로 받아 데이터를 가져오고, 상태를 관리합니다.

import { useEffect, useState } from "react";

export function useFetch(fetchFn, initialValue) {
  const [isFetching, setIsFetching] = useState();
  const [error, setError] = useState();
  const [fetchedData, setFetchedData] = useState(initialValue);

  useEffect(() => {
    async function fetchData() {
      setIsFetching(true);
      try {
        const data = await fetchFn();
        setFetchedData(data);
      } catch (error) {
        setError({ message: error.message || "Failed to fetch data." });
      }

      setIsFetching(false);
    }

    fetchData();
  }, [fetchFn]);

  return {
    isFetching,
    error,
    fetchedData,
    setFetchedData,
  };
}

📌 이 커스텀 훅이 하는 일

• 데이터를 비동기적으로 받아오고
• 로딩 상태와 에러 상태를 자동으로 처리하며
• 필요하면 setFetchedData로 데이터를 외부에서 업데이트할 수도 있도록 합니다

---

 

 

🎈 커스텀 훅 사용의 특징

• useFetch 같은 커스텀 훅은 use로 시작해야 React가 훅으로 인식합니다.
• 커스텀 훅은 JSX를 반환하지 않으며, 컴포넌트처럼 상태 관리 로직만 분리하는 데 초점을 둡니다.
• 동일한 커스텀 훅을 여러 컴포넌트에서 사용해도, 상태는 공유되지 않습니다.
• → 각 컴포넌트는 훅을 독립적으로 사용하며, 각각의 상태를 가집니다.
• setFetchedData처럼 상태 업데이트 함수를 반환값에 포함시켜 외부에서 데이터 제어도 가능합니다.

---

 

 

⚠️ 커스텀 훅 만들 때 주의할 점

1. 이름은 반드시 use로 시작해야 React가 이를 훅으로 처리할 수 있습니다.
2. 내부에서 다른 훅(useState, useEffect 등)을 자유롭게 사용할 수 있습니다.
3. 위에서 언급한 훅의 규칙은 커스텀 훅에도 동일하게 적용됩니다.
   • 조건문 안에서 훅을 사용하면 안 되고, 최상위 레벨에서만 호출해야 합니다.

---

 

 

도움이 되셨다면 ❤️ 좋아요와 댓글로 피드백 주세요!

궁금한 점이 있다면 언제든지 질문 환영입니다 😄

지금까지 읽어주셔서 감사합니다!