리액트 custom hook

리액트에서 커스텀 훅은 개발자가 직접 정의한 함수로, 리액트의 기본 훅을 사용하여 컴포넌트 간의 상태 관리 및 로직을 효율적으로 재사용할 수 있게 해줍니다.

이름은 "use"로 시작해야 합니다: 이 규칙은 리액트가 해당 함수를 훅으로 인식하게 하며, 이는 훅의 규칙을 따르도록 합니다.

리액트 훅을 사용해야 합니다

커스텀 훅 내부에서는 useState, useEffect, useContext 등 리액트의 기본 훅들을 사용하여 상태 관리 및 부작용 처리를 해야 합니다.

커스텀 훅의 예시 :useProducts

상품 목록을 불러오는 기능을 재사용하기 위한 useProducts 커스텀 훅을 만들어보겠습니다. 이 훅은 baseUrl을 인자로 받아, 해당 URL로부터 상품 목록을 불러온 뒤 반환합니다

먼저, 기존의 상품 목록을 불러오는 컴포넌트 구조를 살펴보겠습니다

import React, { useEffect, useState } from "react";
import axios from "axios";
import Product from './../components/Product';

export default function AllProducts() {
  const [list, setList] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:8000/products/')
      .then(res => setList(res.data))
      .catch(() => console.log('error'));
  }, []);

  return (
    <ul className="productList">
      {list.map((v, i) => <Product key={i} pid={v.pid} image={v.image} />)}
    </ul>
  );
}

이제 useProducts 커스텀 훅을 사용하여 상품 목록 로딩 로직을 분리해보겠습니다:

// hooks/useProducts.js
import { useEffect, useState } from "react";
import axios from "axios";

function useProducts(baseUrl) {
  const [list, setList] = useState([]);

  useEffect(() => {
    axios.get(baseUrl)
      .then(res => setList(res.data))
      .catch(() => console.log('error'));
  }, [baseUrl]); // baseUrl이 변경될 때마다 훅이 다시 실행됩니다.

  return list;
}

export default useProducts;

그리고 이를 사용하는 컴포넌트는 다음과 같이 간소화할 수 있습니다:

// AllProducts.js
import React from "react";
import Product from './../components/Product';
import useProducts from './../hooks/useProducts';

export default function AllProducts() {
  const baseUrl = 'http://localhost:8000/products/';
  const list = useProducts(baseUrl);

  return (
    <ul className="productList">
      {list.map((v, i) => <Product key={i} pid={v.pid} image={v.image} />)}
    </ul>
  );
}