useFetch로 API 데이터 가져오기

useFetch

loading, error 등을 확인하고 데이터를 비동기로 받아오는 커스텀 훅

import React, { useState, useEffect } from 'react';

interface FetchResponse<T> {
  loading: boolean;
  error: boolean | undefined;
  data: T | null;
  execute: () => void;
}

const useFetch = <T>(
  fetchFunction: () => Promise<{ data: T }>,
): FetchResponse<T> => {
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<boolean>(false);
  const [data, setData] = useState<T | null>(null);

  const useEffectOnce = (callback: () => void) => {
    useEffect(() => {
      callback();
    }, []);
  };

  const execute = async () => {
    setLoading(true);

    try {
      const response = await fetchFunction();

      if (!response.data) return;

      setData(response.data);

      return response;
    } catch (error) {
      setError(true);
    } finally {
      setLoading(false);
    }
  };

  useEffectOnce(execute);
  return { execute, loading, error, data };
};

export default useFetch;

아주 간편한 사용법

// 데이터를 가공하는 파일에서 아래와 같이 사용하면 됩니다.
import useFetch from '@/shared/@common/api/hooks/useFetch';
import { axiosInstance } from '@/shared/utils/axiosInstance';

const useGetNoticeData = () => {
  const getNoticeData = () => axiosInstance.get('/notices');
  const { data, loading, error, execute } = useFetch(getNoticeData);

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

export default useGetNoticeData;

// 데이터를 렌더링 하는 파일에서 아래와 같이 사용하면 됩니다.
import React from 'react';
import Card from '@/shared/@common/ui/Card/Card';
import useGetNoticeData from '@/shared/@common/notice/api/useGetNoticeData';

const CustomNotice = () => {
  const { data } = useGetNoticeData();

  return ()
  
// useEffect 안에 넣으려면 아래와 같이 사용하면 됩니다.
useEffect(() => { execute()}) 

데이터를 받아온 결과