[React-Hooks] React Hooks - useAxios

* useAxios

• HTTP 통신 라이브러리 Axios를 활용한 서버와 통신을 하게 해주는 hook

---

* useAxois.js 파일

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

const useAxios = (opts, axiosInstance = defaultAxios) => {
  const [state, setState] = useState({
    loading: true,
    error: null,
    data: null,
  });
  const [trigger, setTrigger] = useState(0);
  const refetch = () => {
    setState({
      ...state,
      loading: true,
    });
    setTrigger(Date.now());
  };
  useEffect(() => {
    if (!opts.url) {
      return;
    }
    axiosInstance(opts)
      .then((data) => {
        setState({
          ...state,
          loading: false,
          data,
        });
      })
      .catch((error) => {
        setState({ ...state, loading: false, error });
      });
  }, [trigger]);
  return { ...state, refetch };
};

export default useAxios;

• trigger에 Date.now()의 값을 넣어서 랜덤한 값을 넣어주었다.
• button을 클릭할 경우 refetch함수가 실행된다. trigger의 변화에 반응을 하는 useEffect가 trigger의 값 변화를 감지한다.
• useEffect를 이용해 다시 api를 가져와주는 원리를 이용하여 refetch를 한다.

* App.js 파일

import useAxios from "./useAxios";

const App = () => {
  const { loading, data, error, refetch } = useAxios({
    url: "https://yts.mx/api/v2/list_movies.json",
  });
  console.log(loading, JSON.stringify(data), error);
  return (
    <div>
      <h1>Hello</h1>
      <button onClick={refetch}>refetch</button>
    </div>
  );
};

export default App;