React Hook 사용 전략 – 커스텀 훅으로 비즈니스 로직 정리하기

React Hook 사용 전략 – 커스텀 훅으로 비즈니스 로직 정리하기

---

React에서 상태와 로직을 관리할 때
useEffect, useState, useRef 등을 반복해서 사용하다 보면
컴포넌트가 점점 지저분해지고 재사용성이 떨어지게 됩니다.

이럴 때 유용한 해결책이 바로 커스텀 훅(Custom Hook) 입니다.
이번 글에서는 커스텀 훅을 만드는 방법,
그리고 실무에서 유용하게 쓰이는 패턴을 예제 중심으로 소개합니다.

---

✅ 커스텀 훅이란?

React 훅(useState, useEffect, 등)을 조합하여 만든
재사용 가능한 함수입니다. 이름은 반드시 use로 시작해야 합니다.

function useCounter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount((c) => c + 1);
  const reset = () => setCount(0);

  return { count, increment, reset };
}

---

📦 사용 예

function Counter() {
  const { count, increment, reset } = useCounter();

  return (
    <>
      <p>카운트: {count}</p>
      <button onClick={increment}>+1</button>
      <button onClick={reset}>Reset</button>
    </>
  );
}

✅ UI와 로직을 분리하여 더 읽기 쉽고 유지보수에 유리한 코드가 됩니다.

---

🧠 커스텀 훅이 필요한 경우

반응형

• 여러 컴포넌트에서 동일한 상태/이펙트를 사용할 때
• API 호출 로직을 공통화할 때
• useEffect + loading/error 상태가 반복될 때
• 토글, 폼 상태, 타이머 등 반복적인 로직을 분리할 때

---

🔧 실전 예제 1 – useToggle

function useToggle(initial = false) {
  const [value, setValue] = useState(initial);
  const toggle = () => setValue((v) => !v);
  return [value, toggle] as const;
}

const [isOpen, toggleOpen] = useToggle();

✅ 불리언 상태를 간단하게 관리할 수 있음

---

🔧 실전 예제 2 – useFetch (API 요청)

function useFetch<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    let ignore = false;
    setLoading(true);

    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        if (!ignore) setData(data);
      })
      .catch(setError)
      .finally(() => setLoading(false));

    return () => {
      ignore = true;
    };
  }, [url]);

  return { data, loading, error };
}

const { data, loading, error } = useFetch<User[]>("/api/users");

✅ fetch 로직을 훅으로 분리하여 반복 제거

---

🔧 실전 예제 3 – useInput (폼 필드 관리)

function useInput(initial: string = "") {
  const [value, setValue] = useState(initial);
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };
  return { value, onChange, setValue };
}

const name = useInput();

<input {...name} />

✅ 여러 input을 쉽게 관리할 수 있어 폼에서 유용함

---

💡 커스텀 훅 만들 때 주의할 점

규칙 설명

이름은 use로 시작	React가 훅으로 인식하도록 필수
내부에서 훅 사용 가능	useState, useEffect 등 사용 가능
조건문 안에서는 사용 ❌	훅의 규칙 위반 (항상 같은 순서로 호출되어야 함)

---

🧠 오늘의 요약

항목 설명

커스텀 훅	여러 훅을 조합해 재사용 가능한 함수로 만든 것
사용 이유	중복 로직 제거, 컴포넌트 코드 분리
대표 패턴	useToggle, useFetch, useInput, useTimer 등
사용 규칙	반드시 use로 시작, 최상위에서 호출, 훅 내부 호출 가능

---

🧪 실습 과제

1. useToggle을 만들어서 모달 열고 닫는 로직을 관리해보세요
2. useFetch를 만들어 공통 API 호출을 분리해보세요
3. useInput을 적용하여 회원가입 폼 필드 3개 이상 만들어보세요

---

📌 다음 글 예고

👉 React 앱 테스트 전략 – 유닛 테스트부터 E2E까지

• Jest, React Testing Library 기본 사용법
• 컴포넌트 유닛 테스트 작성하기
• 사용자 시나리오 기반 테스트 흐름

---

 

React 커스텀 훅, useToggle, useFetch, useInput, React 상태 분리, React 코드 재사용, React API 훅, React Hook 설계, 비즈니스 로직 분리, React 실전 패턴