[React]Custom Hook

Custom Hook

Custom Hook은 다음과 같은 경우에 사용하면 좋다고 한다.

1. 재사용성: 여러 컴포넌트에서 동일한 로직을 반복해서 사용하는 경우, Custom Hook으로 분리하면 코드를 재사용할 수 있어 유지보수가 용이하다.
2. 컴포넌트 가독성 향상: 컴포넌트 내부에 비즈니스 로직이 많아지면 가독성이 떨어질 수 있다. Custom Hook으로 로직을 분리하면 컴포넌트가 더 깔끔하고 이해하기 쉬워진다.
3. 단일 책임 원칙: 컴포넌트가 한가지 책임만 가지도록 하기 위해 Custom Hook을 사용해 로직을 분리하면 좋다. 이렇게 하면 각 컴포넌트가 명확한 역할을 가지게 되어 코드의 유지보수가 쉬워진다.
4. 상태 관리와 부수 효과 처리: 복잡한 상태 관리나 부수 효과(side effects)를 처리할 때, Custom Hook을 사용하면 이 로직을 깔끔하게 분리할 수 있다.
5. 공통 패턴 분리: 특정한 패턴(예: 데이터 페칭, 폼 핸들링 등)이 반복되는 경우, Custom Hook으로 분리하면 이러한 패턴을 한 곳에 모아 관리할 수 있다.

 

Custom Hook with axios

특정한 패턴(예: 데이터 페칭, 폼 핸들링)이 반복되는 경우 Custom Hook으로 분리하기도 한다고 했으니, axios로 데이터를 가져오는 것을 Custom Hook으로 분리해보자.

1. axios 설치

npm install axios

 

2. useAxios Custom Hook

import { useState, useEffect } from "react";
import axios from "axios";

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

  useEffect(() => {
    setLoading(true);
    axios
      .get(url, { params })
      .then((res) => {
        setData(res.data.collection.items);
      })
      .catch((err) => {
        setError(err);
      })
      .finally(() => {
        setLoading(false);
      });
  }, [url, params]);

  return { loading, data, error };
}

export default useAxios;

 

3. using useAxios

GET 요청

import PropTypes from "prop-types";
import useAxios from "../hook/useAxios";
import { useMemo } from "react";

GetData.propTypes = {
  query: PropTypes.string.isRequired,
};

function GetData({ query }) {
  const memoizedQuery = useMemo(() => ({ q: query }), [query]);
  const { loading, data, error } = useAxios("https://images-api.nasa.gov/search", memoizedQuery);

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

  return (
    <div>
      <h1>NASA Astronomy Picture of the Day</h1>
      {data.map((item, index) => (
        <div key={index}>
          <h2>{item.data[0]?.title}</h2>
          <p>{item.data[0]?.date_created}</p>
          <img src={item.links ? item.links[0]?.href : ""} alt={item.data[0]?.title} />
          <p>{item.data[0]?.description}</p>
        </div>
      ))}
    </div>
  );
}

export default GetData;

 

 

 

⇒ useEffect에 의존성 배열을 넣는 것이 아니라 refetch를 명시적으로 생성할 수 있다.

import { useState, useCallback } from "react";
import axios from "axios";

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

  const fetchData = useCallback(() => {
    setLoading(true);
    axios
      .get(url, { params })
      .then((res) => {
        setData(res.data.collection.items);
      })
      .catch((err) => {
        setError(err);
      })
      .finally(() => {
        setLoading(false);
      });
  }, [url, params]);

  return { loading, data, error, refetch: fetchData };
}

export default useAxios;

 

아직^^.. 잘 모르겠다…

 

참고

21. 커스텀 Hooks 만들기 · GitBook