Custom hooks

손준호·2023년 9월 28일

React

목록 보기

9/11

배경

필자는 한밭대학교 무선통신소프트웨어 연구실에서 교수님과 연구원님의 지도 아래 2023 Wisoft React Seminar를 진행하고 있다.

드림코딩 아카데미 | Dream Coding Academy

세미나 진행 간 복습은 모두가 진행하되, 각자 한 파트씩 맡아 발표하기로 했다.

본인은 Context API 와 Custom Hooks 에 대해 발표하기로 했으며, 본 글에서는 Custom Hooks 에 대해 정리하려고 한다.

Custom Hooks

컴포넌트 로직을 재사용 하기 위해 사용하는 Hooks

Custom Hooks 는 말 그대로 사용자 정의 Hook 이라고 이해하면 된다.

커스텀 훅을 사용하면 컴포넌트의 로직을 함수로 뽑아내어 재사용할 수 있다.

예제로 알아보자.

예제

본 강의에서는 data 폴더에 간단한 json 을 넣고, fetch해서 화면에 보여주는 비동기 통신 예제가 있다.

개발자 도구의 Network 탭의 Slow 3G 를 이용해 비동기 요청이 수행되고 있는 동안 로딩중이라는 메시지를 클라이언트에게 보여주는 내용과, 에러 발생 시 에러를 보여주는 내용을 학습했다.

Products.jsx

import React, {useState} from "react";
import useProducts from "../hooks/use-products";

export default function Products() {
  
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState();
  const [products, setProducts] = useState([]);
  
  
  const handleChange = () => setChecked((prev) => !prev);

  useEffect(() => {
    setLoading(true);
    setError(undefined);
    fetch(`data/${salesOnly ? 'sale_' : ''}products.json`)
      .then((res) => res.json())
      .then((data) => {
        console.log('🔥뜨끈한 데이터를 네트워크에서 받아옴');
        setProducts(data);
      })
      .catch((e) => setError('에러가 발생했음!'))
      .finally(() => setLoading(false));
    return () => {
      console.log('🧹 깨끗하게 청소하는 일들을 합니다.');
    };
  }, [salesOnly]);
  
  if (loading) return <p>Loading...</p>;
  
  if (error) return <p>{error}</p>;
  
  return (
    <>
      <input
        id="checkbox"
        type="checkbox"
        value={checked}
        onChange={handleChange}
      />
      <label htmlFor="checkbox">Show Only 🔥 Sale</label>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            <article>
              <h3>{product.name}</h3>
              <p>{product.price}</p>
            </article>
          </li>
        ))}
      </ul>
    </>
  );
}

이전에는 위 코드처럼 Products.jsx 에서 모든 로직을 해결했다.

즉 Products.jsx 에서 요청도 보내고, 로딩 상태와 에러 상태도 제어하고, 사용자에게 UI를 보여주는 역할을 모두 수행한 것이다.

이를 Custom Hooks 으로 분리해 로직의 재사용성을 높일 수 있다.

관례적으로 Custom Hooks는 hooks 폴더 안에 만든다.

import { useEffect, useState } from 'react';

export default function useProducts({ salesOnly }) {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState();
  const [products, setProducts] = useState([]);
  
  useEffect(() => {
    setLoading(true);
    setError(undefined);
    fetch(`data/${salesOnly ? 'sale_' : ''}products.json`)
      .then((res) => res.json())
      .then((data) => {
        console.log('🔥뜨끈한 데이터를 네트워크에서 받아옴');
        setProducts(data);
      })
      .catch((e) => setError('에러가 발생했음!'))
      .finally(() => setLoading(false));
    return () => {
      console.log('🧹 깨끗하게 청소하는 일들을 합니다.');
    };
  }, [salesOnly]);

  return [loading, error, products];
}