React에서 커스텀 훅(Custom Hook) 만들기 – 코드 재사용의 핵심

 

React를 사용하다 보면 비슷한 로직이 여러 컴포넌트에 반복될 때가 많습니다. 이럴 때 커스텀 훅(Custom Hook)을 사용하면 코드의 중복을 줄이고, 더욱 깔끔하게 관리할 수 있습니다.

1. 커스텀 훅이란?

커스텀 훅은 use로 시작하는 JavaScript 함수로, React의 내장 훅(useState, useEffect 등)을 활용해 만든 재사용 가능한 기능입니다.

2. 간단한 예시: useToggle 훅

import { useState } from 'react';

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

// 사용 예시
const [isOn, toggleIsOn] = useToggle();

이 훅은 Boolean 값을 true/false로 토글하는 기능을 제공합니다. 같은 로직을 여러 곳에 복붙할 필요 없이 간편하게 사용할 수 있습니다.

3. 실전 예제: useFetch 훅

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(json => {
        setData(json);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

// 사용 예시
const { data, loading } = useFetch('https://api.example.com/posts');

API 호출 로직을 재사용할 수 있어 훨씬 효율적인 코드 구성이 가능합니다.

4. 커스텀 훅의 장점

• 로직을 분리하고 재사용할 수 있다
• 컴포넌트가 더 깔끔하고 가독성이 좋아진다
• 테스트와 유지보수가 쉬워진다

5. 커스텀 훅 만들 때 팁

• 함수 이름은 반드시 use로 시작해야 한다
• 기존 훅들을 조합하여 만들 수 있다 (useState, useEffect, useReducer 등)
• UI 관련 코드는 포함하지 않는 것이 좋다 (로직만 분리)

6. 마무리

커스텀 훅은 복잡한 비즈니스 로직을 깔끔하게 정리해주는 훌륭한 도구입니다. 프로젝트 규모가 커질수록 그 가치가 더욱 빛납니다. 여러분만의 훅을 만들어보며 코드를 정리해보세요!