[React] Axios와 refetch

코드

// useAxios.js

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

export default function useAxios(opts, axiosInstance = defaultAxios) {
  const [state, setState] = useState({
    loading: true,
    error: null,
    data: null,
  })

  const [trigger, setTrigger] = useState(0);

  function 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};
}

//app.js

import React, {useState, useRef, useEffect} from 'react'
import useAxios from './useAxios';

export default function App() {
  const {loading, error, data, refetch} = useAxios({url: 'url 넣기'});

  return (
    <div>
      <h1>{data && data.status}</h1>
      <h2>{loading && 'Loading'}</h2>
      <button onClick={refetch}>Refetch</button>
    </div>
  )
}

배운점

• refetching 방법 및 loading data 컨트롤
• axios 어려워했는데 더 어려워진 것 가ㅌ...