[React] 커스텀 훅(Custom Hook): 당신의 코드, 더 스마트하게! ✨

React 커스텀 훅(Custom Hook) 톺아보기! ✨

React를 다루다 보면 같은 로직을 여러 컴포넌트에서 반복하게 되는 경우가 많죠. 예를 들어, API 호출이나 폼 유효성 검사 같은 로직 말이에요. 이럴 때, React의 커스텀 훅(Custom Hook)이 등장합니다. 오늘은 이 매력적인 도구를 파헤쳐 보고, 실제로 어떻게 사용되는지 함께 알아봐요!

---

커스텀 훅이란? 🤔

커스텀 훅은 React의 내장 훅(useState, useEffect 등)을 조합하거나, 특정 기능을 구현한 재사용 가능한 함수입니다. 이름에 use가 붙어야 하고, React의 훅 규칙을 따릅니다.

// 간단한 커스텀 훅 예시
import { useState } from "react";

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  const increment = () => setCount((prev) => prev + 1);
  const decrement = () => setCount((prev) => prev - 1);
  return { count, increment, decrement };
}

 

위의 예시에서 useCounter는 숫자를 증가시키거나 감소시키는 로직을 캡슐화한 커스텀 훅이에요. 이제 이 훅을 다양한 컴포넌트에서 재사용할 수 있죠!

---

커스텀 훅의 필요성 🌟

1. 코드 재사용성
   • 같은 로직을 여러 컴포넌트에서 반복 작성하지 않아도 돼요.
   • 커스텀 훅에 캡슐화해 두면 로직 변경 시 한 곳만 수정하면 됩니다.
2. 가독성 향상
   • UI 로직과 비즈니스 로직이 분리되어 컴포넌트가 더 간결해집니다.
3. 테스트 용이성
   • 커스텀 훅은 함수이므로, 독립적으로 테스트하기 쉽습니다.

---

커스텀 훅의 작성 규칙 📜

React 훅의 규칙인 훅의 사용 규칙을 반드시 따라야 합니다:

1. use로 시작: 모든 커스텀 훅 이름은 use로 시작해야 React가 훅으로 인식합니다.
2. 컴포넌트 또는 다른 훅 내부에서 호출: 커스텀 훅은 컴포넌트의 최상위 레벨에서 호출해야 합니다.
3. React 훅 사용: 커스텀 훅은 useState, useEffect 같은 내장 훅을 조합하거나 확장한 것이어야 합니다.

---

커스텀 훅의 활용 예제 💡

1. API 데이터 가져오기

API 데이터를 여러 컴포넌트에서 가져와야 한다면? 커스텀 훅으로 만들어 재사용할 수 있어요.

import { useState, useEffect } from "react";

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);

  return { data, loading, error };
}

 

2. 폼 유효성 검사

커스텀 훅으로 폼 상태와 유효성 검사를 관리해 봅시다.

import { useState } from "react";

function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);
  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({ ...values, [name]: value });
  };
  const resetForm = () => setValues(initialValues);
  return { values, handleChange, resetForm };
}

// 사용 예시
function LoginForm() {
  const { values, handleChange, resetForm } = useForm({ username: "", password: "" });
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Submitted:", values);
    resetForm();
  };
  return (
    <form onSubmit={handleSubmit}>
      <input
        name="username"
        value={values.username}
        onChange={handleChange}
        placeholder="Username"
      />
      <input
        name="password"
        type="password"
        value={values.password}
        onChange={handleChange}
        placeholder="Password"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

---

커스텀 훅 사용 시 주의사항 🛠️

1. 훅 내부에 조건문 X
   • 훅은 항상 동일한 순서로 호출되어야 하므로, 조건문 안에서 호출하면 안 됩니다.
2. 의존성 배열 관리
   • useEffect 같은 훅을 사용할 때, 의존성 배열을 제대로 설정하지 않으면 무한 루프나 의도하지 않은 동작이 발생할 수 있어요.
3. 과도한 추상화 금지
   • 너무 복잡하거나 많은 기능을 담은 커스텀 훅은 오히려 코드 가독성을 떨어뜨립니다.
   • 특정 기능에 집중된 훅을 작성하는 것이 좋아요.

---

커스텀 훅으로 더욱 깔끔한 React 코드 ✨

React의 커스텀 훅은 단순히 “코드 재사용”을 넘어서, 컴포넌트와 로직을 깔끔히 분리해 유지보수성을 극대화하는 도구입니다. 반복되는 작업이나 재사용 가능한 로직이 보인다면, 커스텀 훅으로 추출해보세요.

 

🌷전설의 개발자가 되어봅시당! 🌷