Custom Hook

React Custom Hook (커스텀 훅)

1. 커스텀 훅이란?

커스텀 훅(Custom Hook)은 React의 내장 훅(useState, useEffect 등)을 조합하여 반복되는 상태 로직을 재사용 가능한 함수로 추출한 것입니다.

핵심 규칙

•

함수 이름은 반드시 use로 시작해야 합니다.

•

내부에서 다른 훅을 호출할 수 있습니다.

•

컴포넌트가 아닌 일반 JavaScript 함수이지만, 훅의 규칙을 따릅니다.

일반 함수        →  getUser()
커스텀 훅        →  useUser()
Plain Text
복사

2. 왜 커스텀 훅을 사용하는가?

문제 상황	커스텀 훅 도입 후
여러 컴포넌트에 동일한 로직 중복	훅 하나로 공유
컴포넌트가 너무 커지고 복잡해짐	로직을 분리하여 컴포넌트 단순화
로직 테스트가 어려움	훅 단위로 독립 테스트 가능
로직 수정 시 여러 파일 변경 필요	훅 파일 하나만 수정

3. 기본 예제 - useCounter

커스텀 훅 없이 (중복 코드 발생)

// ComponentA.jsx
const [count, setCount] = useState(0);
const increment = () => setCount(c => c + 1);
const decrement = () => setCount(c => c - 1);
const reset = () => setCount(0);

// ComponentB.jsx (동일한 코드 반복)
const [count, setCount] = useState(0);
const increment = () => setCount(c => c + 1);
const decrement = () => setCount(c => c - 1);
const reset = () => setCount(0);
JavaScript
복사

커스텀 훅으로 분리

// hooks/useCounter.js
import { useState } from 'react';

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}

export default useCounter;
JavaScript
복사

사용하는 컴포넌트

// ComponentA.jsx
import useCounter from './hooks/useCounter';

function ComponentA() {
  const { count, increment, decrement, reset } = useCounter(10);

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
      <button onClick={reset}>초기화</button>
    </div>
  );
}
JavaScript
복사

4. 실용 예제 - useFetch

API 호출 로직을 재사용 가능하게 추출합니다.

// hooks/useFetch.js
import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!url) return;

    setLoading(true);
    setError(null);

    fetch(url)
      .then(res => {
        if (!res.ok) throw new Error('서버 오류: ' + res.status);
        return res.json();
      })
      .then(json => setData(json))
      .catch(err => setError(err.message))
      .finally(() => setLoading(false));
  }, [url]);

  return { data, loading, error };
}

export default useFetch;
JavaScript
복사

사용 예시

import useFetch from './hooks/useFetch';

function UserList() {
  const { data: users, loading, error } = useFetch('<https://jsonplaceholder.typicode.com/users>');

  if (loading) return <p>로딩 중...</p>;
  if (error)   return <p>에러: {error}</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}
JavaScript
복사

5. 실용 예제 - useLocalStorage

localStorage와 상태를 동기화합니다.

// hooks/useLocalStorage.js
import { useState } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue];
}

export default useLocalStorage;
JavaScript
복사

사용 예시

import useLocalStorage from './hooks/useLocalStorage';

function ThemeToggle() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      현재 테마: {theme}
    </button>
  );
}
JavaScript
복사

6. 실용 예제 - useInput

폼 입력 상태를 관리합니다.

// hooks/useInput.js
import { useState } from 'react';

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

  const onChange = (e) => setValue(e.target.value);
  const reset = () => setValue(initialValue);

  return { value, onChange, reset };
}

export default useInput;
JavaScript
복사

사용 예시

import useInput from './hooks/useInput';

function LoginForm() {
  const email = useInput('');
  const password = useInput('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(email.value, password.value);
    email.reset();
    password.reset();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email"    placeholder="이메일"   {...email} />
      <input type="password" placeholder="비밀번호" {...password} />
      <button type="submit">로그인</button>
    </form>
  );
}
JavaScript
복사

스프레드 활용: {...email}은 value={email.value} onChange={email.onChange}와 동일합니다.

7. 실용 예제 - useDebounce

입력값이 일정 시간 동안 변하지 않으면 적용합니다 (검색 최적화에 유용).

// hooks/useDebounce.js
import { useState, useEffect } from 'react';

function useDebounce(value, delay = 500) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(timer); // 클린업
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;
JavaScript
복사

사용 예시

import { useState } from 'react';
import useDebounce from './hooks/useDebounce';

function SearchBox() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 500);

  // debouncedQuery가 변경될 때만 API 호출
  useEffect(() => {
    if (debouncedQuery) {
      console.log('검색 API 호출:', debouncedQuery);
    }
  }, [debouncedQuery]);

  return (
    <input
      value={query}
      onChange={e => setQuery(e.target.value)}
      placeholder="검색어 입력..."
    />
  );
}
JavaScript
복사

8. 커스텀 훅 작성 규칙 요약

규칙	설명
use 접두사	이름이 반드시 use로 시작해야 함
훅의 규칙 준수	최상위 레벨에서만 호출, 조건문/반복문 내 호출 금지
파일 위치	보통 src/hooks/ 폴더에 모음
단일 책임	하나의 훅은 하나의 관심사만 담당
반환값	객체 또는 배열로 필요한 값과 함수를 반환

9. 폴더 구조 권장 예시

src/
├── components/
│   ├── UserList.jsx
│   └── LoginForm.jsx
├── hooks/
│   ├── useCounter.js
│   ├── useFetch.js
│   ├── useInput.js
│   ├── useLocalStorage.js
│   └── useDebounce.js
└── App.jsx
Plain Text
복사

10. 커스텀 훅 vs 일반 함수

구분	커스텀 훅	일반 함수
이름	use로 시작	자유롭게 작명
내부 훅 사용	가능 (useState, useEffect 등)	불가능
상태 관리	가능	불가능
사이드 이펙트	가능	불가능
호출 위치	컴포넌트 또는 다른 커스텀 훅 내부만	어디서든 가능

핵심 정리

커스텀 훅은 "로직의 재사용"을 위한 도구입니다. UI(JSX)는 컴포넌트로 분리하고, 상태 로직은 커스텀 훅으로 분리하는 것이 React의 권장 패턴입니다.

컴포넌트 = UI (JSX) + 커스텀 훅 호출

커스텀 훅 = 상태 로직 + 사이드 이펙트 로직