useAxios 내가 해냄

인트로

커스텀 훅 찐막차입니다. axios에 대해서도 알아야 하기 때문에 아예 따로 빼버렸습니다.
이전까지 훅들과 달리 코드가 조금 더 복잡하기도 하고요. 

---

Before start...

axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 라이브러리입니다. 
사용하기 위해서는 라이브러리 설치를 해줘야합니다.

npm install axios

useAxios

결과물부터 확인해 봅시다.
api로부터 데이터를 받아올 때 status를 보여줍니다. refetch 버튼을 클릭하면 다시 정보를 요청합니다.

 
그럼 이제 코드를 살펴보겠습니다.

useAxios.js

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

const useAxios = (opts, axiosInstance = axios) => {
  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]);
  if (!opts.url) {
    return;
  }
  return { ...state, refetch };
};

export default useAxios;

opts와 axiosInstance를 인자로 받습니다. 이때 axiosInstance는 axios가 초기값입니다.
opts는 기본적으로 url을 가지고 있어야 합니다.
요청해서 받은 데이터를 저장할 state를 정의해 주었습니다. loading, error, data 프로퍼티를 가집니다.
refetch를 위한 trigger도 만들어줍니다. 
state와 refetch 함수를 반환합니다.
refetch
useEffect를 호출하기 위한 함수로 함수가 호출되면 기존 state의 값을 가져온 후 loading의 값을 true로 바꿉니다.
setTrigger함수를 통해 trigger의 값을 갱신시킵니다.
useEffect의 의존성배열에 trigger를 집어넣어 trigger값이 바뀔 때마다 axios로 요청을 할 예정입니다. 
useEffect
useEffect는 trigger 값이 바뀔 때마다 실행됩니다.
axios 요청을 할 때 사용할 수 있는 config 옵션들이 많은데요. url, method, baseURL 등등이 있습니다. 이 부분은 문서를 확인해 보시면 되겠습니다. url은 필수입니다. method는 지정하지 않으면 get을 default로 가집니다. 
then을 사용하면 응답을 받을 수 있습니다. 받아온 응답을 보니 status랑 뭐 이런 게 담겨있네요.
받아온 응답을 state 변수 값으로 넣어줍니다. 
응답을 받아온 후에는 Loading을 false로 바꿔줘야겠죠
catch를 통해 error를 확인할 수 있습니다.

그리고 setState로 값을 갱신할 때 spread로 이전 값을 가지고 오는 이유는 다음과 같습니다. 안 해주면 다른 프로퍼티가 날아가버려요. (당연함.. 그냥 갈아 끼우는 거심..)

내 loading 돌려줘요

App.js

import React from "react";
import useAxios from "./useAxios";

function App() {
  const { loading, data, error, refetch } = useAxios({
    url: "https://yts.mx/api/v2/list_movies.json",
  });
  return (
    <div>
      <h2>{data && data.status}</h2>
      <h2>{loading && "Loading"}</h2>
      <button onClick={refetch}>Refetch</button>
    </div>
  );
}

export default App;

무비리스트를 요청했습니다. opts로 url만 넣어줬어요. 
화면에는 단축평가를 이용해 data를 정상적으로 받아왔을 때 data.status를 보여줍니다.
그리고 데이터를 받아오는 동안 즉 loading이 true일 때만 loading 중이라는 표시를 해줍니다.
Refetch 버튼을 클릭하면 refetch 함수가 실행됩니다.
 
끝!

---

재밌었습니다. 추가적인 훅도 나중에 좀 알아봐야겠네요. 이론적인 부분도 공식문서를 자세하게 살펴봐야 할 것 같습니다.

 
노마드코더 실전형 리액트 훅 강의 내용을 참고하였습니다.