[React] 커스텀 훅(Custom Hooks) 만들기

 

훅(Hook) 설명은? 👉 [React] React Hooks 여기서 확인하기!

[React] React Hooks

1. Custom Hooks

자신만의 Hook을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용이 가능하다.

UI 요소의 재사용성을 올리기 위해 컴포넌트를 만드는 것 처럼, 로직의 재사용을 높이기 위해서 커스텀 훅을 제작한다.

 

* 한 로직이 여러번 사용될 경우 함수를 분리하는 것처럼 Hook을 만드는 것일 뿐이며 Hook이름은 'use'로 시작해야한다.

 

2. Custom Hooks 만들기

아래 커스텀 훅은 데이터를 가져오는 동안 데이터, 로딩상태, 에러처리를 하기 위해 useFetch라는 훅을 만들었다.

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

const useFetch = (url) => {
  const [data, setData] = useState([]); // api 데이터 저장하기
  const [loading, setLoading] = useState(false); // 데이터 로딩 상태
  const [error, setError] = useState(false); // 에러 발생 상태

  // 컴포넌트 랜더링될 때 실행되는 훅
  useEffect(() => {
    const fetchData = async () => {
      // 로딩 중
      setLoading(true);
      try {
        // 데이터 가져오기
        const res = await axios.get(url);
        setData(res.data);
      } catch (err) {
        setError(err);
      }
      // 완료 하면 로딩 상태 false
      setLoading(false);
    };
    fetchData();
  }, [url]); // 의존성 배열 => url 변경될 때 마다 useEffect() 실행하기

  const reFetch = async () => {
    setLoading(true);
    try {
      const res = await axios.get(url);
      setData(res.data);
    } catch (err) {
      setError(err);
    }
    setLoading(false);
  };

  return { data, loading, error, reFetch };
};

• useEffect(): 컴포넌트가 랜더링 될 때 마다 실행되는 훅으로 두번째 매개변수로 전달되는 배열이 의존성 배열이다. 의존성 배열에 포함된 값들이 변경될 때만 useEffect 콜백함수가 실행되기 때문에 url이 변경될 때 마다 데이터를 가져오는 콜백함수가 실행된다.
• 데이터를 가져오는 동안 로딩상태를 true, 완료되면 false로 설정
• 성공적으로 데이터를 가져오면 setData()에 데이터 업데이트 하기
• 에러 발생 시 setError()로 에러 상태 업데이트 하기
• reFetch(): 데이터 다시 가져오기(업데이트)
• 객체로 반환해서 컴포넌트에서 필요한 데이터와 상태를 사용할 수 있음

 

🔎 의존성 배열 왜 사용할까?

- 효율적인 업데이트: 특정값이 변경될 때만 useEffect()가 실행될 수 있기 때문에
- 무한 루프 방지: 컴포넌트가 랜더링될때마다 실행되는데 지정하지 않으면 콜백함수가 랜더링 될 때 마다 실행되어 무한루프에 빠진다.
- 종속성 설정: useEffect() 콜백함수 내에서 사용하기 때문에 해당값들을 사용할 수 있도록 종속성 설정한다.

* 의존성 배열을 빈배열[]로 지정하면 처음 랜더링될 때 한번만 실행 / 값이 있는 배열일 땐 해당값이 변경 될때마다 실행