Custom Hook 2차 시도 : useAxios

import React, { useState } from "react";

import axios from "axios";

import { useDispatch } from "react-redux";

import { initialTodos } from "../../../redux/modules/postSlice";

const instance = axios.create({

  baseURL: "http://localhost:3001",

  headers: { "X-Custom-Header": "foobar" },

  timeout: 1000,

});

export const useAxios = (url) => {

  const [error, setError] = useState(false);

  const [isLoading, setLoading] = useState(false);

  const dispatch = useDispatch();

  const getData = async () => {

    setLoading(true);

    setError(false);

    try {

      const { data } = await instance.get(`/${url}`);

      setLoading(false);

      dispatch(initialTodos(data));

    } catch (error) {

      setLoading(false);

      setError(true);

    }

  };

  return { error, isLoading, getData };

};

 

useEffect Hook을 axios 버전으로 만들어 봤다. axios를 통해 초반에 데이터를 get해오는 로직.
여기서 조금 더 올리면 data 자체를 가공해서 컴포넌트로 만들어서 return 시키는 방법까지 구현하면 유연성은 떨어지지만 하나의 테마 프로젝트 안에서의 활용은 올라갈 것이라는 생각이 든다.