[React/실전형 리액트 Hooks/노마드코더] #2.8 useAxios

 

강의출처

 

https://youtu.be/IxydSMI4Qjg

 

 

 

 

 

---

 

 

useAxios

 

 

useAxios는 React Hooks 중 하나로, 

Axios 라이브러리를 사용하여 HTTP 요청을 보내고, 그 결과를 처리할 수 있게 해주는 기능이다.

 

 

Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, 비동기적으로 데이터를 가져올 수 있다.

useAxios를 사용하면 Axios를 통해 비동기적으로 데이터를 가져오고, 그 결과를 상태로 저장하여 컴포넌트에서 사용할 수 있다.

 

useAxios는 useState와 useEffect와 같은 방식으로 사용된다.

컴포넌트 내부에서 호출하여, 두 개의 매개변수를 받는다.

첫 번째 매개변수는 Axios에서 사용하는 설정 객체(config)이며, 두 번째 매개변수는 옵션 객체(options)이다.

 

 

 

 

---

 

 

예제코드

 

index.js

import ReactDOM from "react-dom";
import useAxios from "./useAxios/useAxios.js";

const App = () => {
  const {loading, data, error, refetch} = useAxios({
    url:"https://yts.mx/api/v2/list_movies.json"
  });
  console.log(`loading: ${loading}\ndata: ${JSON.stringify(data)}\n`)
  return (
    <div className="App" style={{ height: "1000vh" }}>
      <h1>{data && data.status}</h1>
      <h2>{loading && "Loading"}</h2>
      <button onClick={refetch}>Refetch</button>
    </div>
  );
};

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

 

 

위 코드는 useAxios 커스텀 훅을 사용하여 API를 호출하고 결과를 화면에 표시하는 React 앱이다.
App 컴포넌트에서는 useAxios를 사용하여 영화 목록을 불러온다.

loading, data, error, refetch은 useAxios에서 반환하는 객체의 속성들인데,

이 객체를 개별적으로 변수로 사용 가능하다.

console.log()를 사용하여 현재 로딩 상태와 불러온 데이터를 출력한다.

화면에는 data.status를 출력하고, 로딩 중일 때 "Loading" 메시지가 나타난다.

Refetch 버튼을 누르면 데이터를 다시 불러올 수 있다.

마지막으로, React 앱을 root 엘리먼트에 렌더링 한다.

 

 

 

 

---

 

 

useAxios.js

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

const useAxios = (opts, axiosInstance = dafaultAxios) => {
    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;

 

 

이 코드는 React에서 HTTP 요청을 처리하기 위한 커스텀 훅인 useAxios를 정의한다.
useAxios는 axios 라이브러리를 사용하여 HTTP 요청을 보내고 응답을 처리한다.
useAxios는 다음과 같은 인자를 가진다.

 

opts : HTTP 요청에 필요한 설정 객체를 나타내며 axios 라이브러리에서 사용되는 설정 객체와 유사하다.
axiosInstance : 선택적으로 axios 인스턴스를 받을 수 있다.

 

useAxios는 useState와 useEffect 훅을 사용한다.

useState를 사용하여 컴포넌트의 loading, error, data를 상태로 관리한다.

useEffect를 사용하여 HTTP 요청을 보낸다.
HTTP 요청을 보내기 전에 loading 값을 true로 설정한다.
HTTP 요청을 보내고 나면 then 블록에서 데이터를 받아와 상태를 업데이트한다.
catch 블록에서는 에러를 받아와 상태를 업데이트한다.
또한, refetch 함수를 정의하여 컴포넌트에서 데이터를 다시 불러올 수 있도록 한다.

 

마지막으로, 만약 opts.url이 없다면, return문에서 undefined를 반환합니다.

 

결과적으로 useAxios는 HTTP 요청을 보내고 응답을 처리하는데 유용한 커스텀 훅이다.

 

 

 

 

---

 

 

실행결과

 

 

로딩중

 

 

로딩완료

 

 

Refetch 버튼 클릭하자 새로 렌더링 값 불어와짐