[React] Axios

npm i axios

axios를 설치합니다.

// index.js

import React, { useEffect, useRef, useState } from "react";
import ReactDOM from "react-dom";
import useAxios from "./useAxios";

const App = () => {
  const { loading, data, error, refetch } = useAxios({
    url:
      "https://cors-anywhere.herokuapp.com/https://yts.am/api/v2/list_movies.json",
  });
  return (
    <div className="App">
      <h1>{data && data.status}</h1>
      <h2>{loading && "Loading"}</h2>
      <h2>{error && "Error"}</h2>
      <button onClick={refetch}>Refetch</button>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

// useAxios.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(() => {
    axiosInstance(opts)
      .then((data) => {
        setState({
          ...state,
          loading: false,
          data,
        });
      })
      .catch((error) => {
        setState({ ...state, loading: false, error });
      });
  }, [trigger]);
  return { ...state, refetch };
};

export default useAxios;

axios는 비동기 방식으로 HTTP 데이터 요청을 실행합니다.

요청할 url을 useAxios에 보내줍니다.
axios로 해당 url에 데이터를 요청하고 결과값을 setState()를 통해 반영합니다.
결과값들을 반환하고 그 값들을 표시합니다. (data.status, loading, error)

refetch를 버튼에 연결해줍니다.
버튼을 누르면 trigger가 변경되어서, useEffect부분의 코드가 재실행됩니다.
이는 다시 해당 url에 요청을 보내는 작업을 진행하게 됩니다.