14 커스텀 훅(Custom Hook) 만들기: 재사용 가능한 훅 설계와 실제 프로젝트 활용 예시

 React에서 훅(Hook)은 상태 관리와 생명주기 관련 기능을 컴포넌트에 적용할 수 있게 해주는 함수입니다. 기본 훅 외에도 개발자가 자신만의 **커스텀 훅(Custom Hook)**을 만들어 재사용 가능한 코드를 작성할 수 있습니다. 이번 글에서는 커스텀 훅을 만드는 방법과 실제 프로젝트에서 어떻게 활용할 수 있는지에 대해 다뤄보겠습니다. 커스텀 훅을 통해 코드의 가독성, 유지보수성, 재사용성을 높이는 방법을 함께 살펴보겠습니다.

1. 커스텀 훅이란 무엇인가요?

커스텀 훅은 React의 기본 훅을 활용하여 특정 기능을 재사용할 수 있도록 만든 함수입니다. 기본 훅(useState, useEffect, useContext 등)을 조합하여 필요한 로직을 캡슐화하고, 여러 컴포넌트에서 이를 재사용할 수 있도록 해줍니다.

a. 커스텀 훅의 기본 구조

커스텀 훅은 반드시 use로 시작하는 함수명으로 정의해야 합니다. 이는 React에서 훅을 구별하는 규칙입니다. 예를 들어, useFetch라는 훅을 만들어 데이터를 가져오는 기능을 구현할 수 있습니다.

import { useState, useEffect } from 'react';

// 커스텀 훅 예시: useFetch
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
}

위 코드에서 useFetch는 주어진 url에서 데이터를 가져오는 커스텀 훅입니다. 이 훅은 data, loading, error 상태를 관리하고, 이를 호출한 컴포넌트에서 재사용할 수 있게 해줍니다.

2. 커스텀 훅 만들기: 재사용 가능한 훅 설계

커스텀 훅을 만들 때 중요한 점은 코드의 재사용성을 높이고, 다른 컴포넌트에서 손쉽게 활용할 수 있도록 설계하는 것입니다. 커스텀 훅은 복잡한 로직을 분리하고, 여러 컴포넌트에서 동일한 기능을 반복하지 않도록 돕습니다.

a. 예시: 폼 입력 관리 훅 만들기

사용자가 입력한 값을 관리하는 폼을 여러 곳에서 사용한다면, 이를 관리하는 커스텀 훅을 만들 수 있습니다. 이 훅을 통해 입력 값, 오류 메시지, 폼 검증 로직을 간단하게 처리할 수 있습니다.

import { useState } from 'react';

// 커스텀 훅 예시: useForm
function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value,
    });
  };

  const validate = () => {
    let formErrors = {};
    if (!values.name) {
      formErrors.name = '이름을 입력해주세요';
    }
    if (!values.email) {
      formErrors.email = '이메일을 입력해주세요';
    }
    setErrors(formErrors);
    return formErrors;
  };

  return {
    values,
    errors,
    handleChange,
    validate,
  };
}

위 예시에서 useForm 훅은 name, email 등의 필드를 가진 폼의 입력 값을 관리하고, 입력 값이 비어 있을 경우 오류 메시지를 반환합니다. useForm 훅을 사용하면 여러 폼에서 같은 로직을 반복하지 않고, 코드의 중복을 줄일 수 있습니다.

b. 커스텀 훅을 사용한 컴포넌트 활용

커스텀 훅은 실제 컴포넌트에서 어떻게 활용될까요? 아래 예시에서는 useForm 훅을 활용하여 간단한 회원 가입 폼을 구현해 보겠습니다.

import React from 'react';
import { useForm } from './useForm'; // useForm 훅 임포트

function SignUpForm() {
  const { values, errors, handleChange, validate } = useForm({ name: '', email: '' });

  const handleSubmit = (e) => {
    e.preventDefault();
    const formErrors = validate();
    if (Object.keys(formErrors).length === 0) {
      // 폼 제출 처리 로직
      console.log('폼 제출:', values);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>이름:</label>
        <input
          type="text"
          name="name"
          value={values.name}
          onChange={handleChange}
        />
        {errors.name && <p>{errors.name}</p>}
      </div>
      <div>
        <label>이메일:</label>
        <input
          type="email"
          name="email"
          value={values.email}
          onChange={handleChange}
        />
        {errors.email && <p>{errors.email}</p>}
      </div>
      <button type="submit">회원 가입</button>
    </form>
  );
}

export default SignUpForm;

SignUpForm 컴포넌트에서는 useForm 훅을 사용하여 폼 상태와 검증을 처리하고 있습니다. 이렇게 하면 폼 관련 로직을 useForm 커스텀 훅에서 분리하여 재사용할 수 있습니다.

3. 커스텀 훅을 실제 프로젝트에서 활용하기

커스텀 훅은 복잡한 상태 관리나 공통 기능을 처리할 때 유용합니다. 예를 들어, API 호출, 폼 입력 처리, 애니메이션 상태 관리 등 다양한 상황에서 커스텀 훅을 활용할 수 있습니다.

a. 예시: API 요청을 처리하는 커스텀 훅

여러 컴포넌트에서 같은 API를 호출해야 하는 경우, 이를 하나의 커스텀 훅으로 만들 수 있습니다. 예를 들어, 데이터 목록을 가져오는 useFetchList 훅을 만들 수 있습니다.

import { useState, useEffect } from 'react';

function useFetchList(url) {
  const [list, setList] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setList(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error);
        setLoading(false);
      });
  }, [url]);

  return { list, loading, error };
}

이 useFetchList 훅을 여러 컴포넌트에서 재사용하여 데이터 목록을 가져오고 처리할 수 있습니다. 커스텀 훅을 사용함으로써 코드의 중복을 줄이고, 유지보수성을 높일 수 있습니다.

4. 결론

커스텀 훅을 사용하면 React 애플리케이션의 코드가 더 간결하고 재사용 가능하게 됩니다. useState, useEffect 등의 기본 훅을 활용해 상태 관리나 로직을 캡슐화하고, 이를 여러 컴포넌트에서 재사용할 수 있습니다. 또한, 커스텀 훅을 통해 코드의 유지보수성과 가독성을 향상시킬 수 있습니다.

**커스텀 훅(Custom Hook)**은 특히 복잡한 로직을 여러 컴포넌트에서 공유하고자 할 때 매우 유용합니다. 이를 통해 더 깔끔하고 효율적인 React 애플리케이션을 개발할 수 있습니다.