React의 커스텀 Hooks: 만드는 이유와 방법

React는 주로 모듈식 접근 방식과 후크와 같은 강력한 기능으로 인해 사용자 인터페이스 구축을 위한 가장 인기 있는 라이브러리 중 하나가 되었습니다. 이 중에서 사용자 정의 후크는 코드를 더 깔끔하고 재사용 가능하며 유지 관리하기 쉽게 만드는 방법으로 눈에 띕니다. 이 기사에서는 사용자 정의 후크를 사용해야 하는 이유와 이를 효과적으로 생성하는 방법을 살펴보겠습니다.

---

맞춤 후크를 만드는 이유는 무엇입니까?

커스텀 후크를 사용하면 재사용 가능한 로직을 깔끔하고 모듈식 방식으로 캡슐화할 수 있습니다. 코드를 간소화하고 여러 가지 이점을 제공합니다.

1. 코드 재사용성: 사용자 정의 후크를 사용하면 로직을 한 번 작성하고 여러 구성 요소에서 재사용할 수 있습니다. 이렇게 하면 중복이 줄어들고 애플리케이션의 일관성이 유지됩니다.

2. 구성 요소 정리: 로직을 사용자 정의 후크로 이동하면 구성 요소를 단순화하여 상태나 부작용을 관리하는 대신 UI 렌더링에 집중할 수 있습니다.

3. 향상된 테스트 가능성: 사용자 정의 후크는 독립형 함수이므로 구성 요소의 UI에 의존하지 않고 이에 대한 단위 테스트를 작성할 수 있습니다.

4. 관심사항 분리: 사용자 정의 후크는 프레젠테이션에서 논리를 분리하여 우려 사항을 더 효과적으로 분리하도록 권장합니다.

---

사용자 정의 후크를 만드는 방법

사용자 정의 후크는 이름이 "use"로 시작하고 내부에서 다른 React 후크(예: useState, useEffect 등)를 호출할 수 있는 JavaScript 함수입니다.

사용자 정의 후크를 만드는 단계:

1. 구성요소에서 재사용 가능한 로직을 식별하세요.
2. 로직을 새로운 기능으로 옮깁니다.
3. 함수 이름 앞에 "use"를 붙입니다(예: useFetch).
4. 상태나 부작용을 관리하려면 이 함수 내부의 후크를 사용하세요.
5. 사용자 정의 후크에서 필요한 상태나 기능을 반환합니다.

---

예: 데이터 가져오기를 위한 사용자 정의 후크

여러 구성요소의 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 () => {
      setLoading(true);
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error("Failed to fetch data");
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

사용자 정의 후크를 사용하는 방법:

이제 모든 구성 요소에서 useFetch를 사용하여 데이터를 가져올 수 있습니다.

import React from "react";
import useFetch from "./useFetch";

function App() {
  const { data, loading, error } = useFetch("https://api.example.com/data");

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h1>Data:</h1>
      <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}