[React]-fetch 대신 axios를 사용해보자!

유튜브 작업을 할 때 원래는 fetch를 사용해서 데이터를 불러오는 방식으로 코드를 작성했었다.

// Videos.jsx

const {
    isLoading,
    error,
    data: videos,
  } = useQuery(["videos", keyword], async () => {
    return fetch(`/data/${keyword ? "search" : "popular"}.json`)
      .then((res) => res.json())
      .then((data) => data.items);
  });

fetch 도 네트워크 통신을 할 때 유용한 api이긴 하지만 문제점이 몇 가지 있다.

1. response를 받아올 때마다 json으로 변환해줘야 함.
   
   
2. 네트워크 통신에 문제가 있거나, socket이 타임아웃 되었거나, offline이거나 할 때 에러가 던져져서 catch로 에러를 핸들링 할 수 있지만 백엔드에서 뭔가 잘못되었다고 반응을 해줘도 전부 성공적인 case로 간주하기 때문에 then으로 들어온다. 따라서 then 안에서 throw를 이용해서 에러를 직접 수동적으로 던져줘야 한다.

이 문제점들을 해결해 줄 수 있는 라이브러리가 바로 axios이다!!

axios 공식 문서

import axios from 'axios';
//const axios = require('axios'); // legacy way

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

위 코드는 공식문서에 나와있는 기본 사용법 중 일부이다.

axios get으로 데이터를 받아오고, 성공한다면 response가 전달이 된다.
response를 통해 해당 데이터에 바로 접근 가능하고, json으로 변환할 필요가 없다!
실패한다면 catch를 통해 에러를 잡으면 된다.
axios는 백엔드에서 200대 status code를 던졌을 때만 then으로 들어오고, 400대를 던지면 다 catch로 들어오게 된다!

우선 아래의 코드로 axios를 추가해주고,
yarn add axios

맨 위 코드를 수정해보면,

// Videos.jsx

 const { keyword } = useParams();
  const {
    isLoading,
    error,
    data: videos,
  } = useQuery(["videos", keyword], async () => {
    return axios
      .get(`/data/${keyword ? "search" : "popular"}.json`)
      .then((res) => res.data.items);
  });

이렇게 json으로 변환하는 과정이 필요없어서 더 깔끔한 코드로 작성할 수 있다!