[Custom Hook 패턴] Custom Hook이란? 왜 필요한가? 언제 사용하면 좋은가?

📌 Custom Hook 패턴 개요

1️⃣ Custom Hook이란?

Custom Hook은 React의 기존 Hooks(useState, useEffect, useContext 등) 을 조합하여

반복되는 로직을 재사용 가능하도록 추출한 함수.
컴포넌트 내부에서 자주 사용되는 로직을 별도의 함수로 분리함으로써 코드의 가독성과 유지보수성을 향상시킴.

✅ 특징

✔️ use 접두사를 반드시 붙여야 React가 Hook으로 인식함
✔️ JSX를 반환하지 않음 (UI가 아닌 로직만 다룸)
✔️ 다른 Hook(useState, useEffect, useMemo 등)을 내부에서 사용할 수 있음

---

2️⃣ 왜 Custom Hook이 필요한가? (기존 React 개발 방식의 문제점)

기존 방식에서는 반복되는 로직이 있을 경우, 여러 컴포넌트에서 코드를 중복 작성해야 했음
하지만 Custom Hook을 사용하면 공통 로직을 한 곳에서 관리하고 재사용 가능하게 만들 수 있음

✅ 기존 방식의 문제점 (Custom Hook이 없을 때)

      
      
      
    
const UserProfile = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('/api/user')
      .then((res) => res.json())
      .then((data) => setUser(data));
  }, []);

  return <div>{user?.name}</div>;
};

const UserSettings = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('/api/user')
      .then((res) => res.json())
      .then((data) => setUser(data));
  }, []);

  return <div>Settings for {user?.name}</div>;
};

 

✅ 문제점: 같은 API 요청 코드가 중복됨

---

3️⃣ Custom Hook을 사용하면? (해결 방법)

      
      
      
    
const useUserData = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('/api/user')
      .then((res) => res.json())
      .then((data) => setUser(data));
  }, []);

  return user;
};

const UserProfile = () => {
  const user = useUserData();
  return <div>{user?.name}</div>;
};

const UserSettings = () => {
  const user = useUserData();
  return <div>Settings for {user?.name}</div>;
};

 

✅ 이점:
✔️ 중복 제거 → 유지보수성 향상
✔️ 비즈니스 로직과 UI 코드가 분리됨 → 관심사 분리
✔️ 여러 컴포넌트에서 동일한 로직을 재사용 가능

---

4️⃣ 언제 Custom Hook을 사용하면 좋은가?

다음과 같은 상황에서 Custom Hook을 만들면 효과적이야:

✅ 반복되는 비즈니스 로직이 있을 때
→ API 호출, 데이터 변환, 폼 상태 관리 등

✅ 컴포넌트 간 상태를 공유해야 할 때
→ useAuth, useTheme, useCart 같은 전역 상태 관리

✅ React Query, Zustand 등의 상태 관리 라이브러리와 함께 사용할 때
→ 상태 관리 로직을 Custom Hook으로 감싸서 관리 가능

✅ 비동기 처리 로직(API Fetching, Debounce, Throttle 등)을 분리할 때
→ useFetch, useDebounce, useInfiniteScroll 등

---

📌 정리

✅ Custom Hook은 재사용 가능한 비즈니스 로직을 캡슐화하는 함수
✅ 코드 중복을 줄이고, UI와 로직을 분리할 수 있도록 돕는다
✅ 비즈니스 로직을 쉽게 유지보수하고 확장할 수 있다