[React] fetch web APIs vs Axios

리액트 스터디에서 axios를 다루게 되어
기존 fetch Api와 Axios의 차이를 기록하려고 한다.

개요

JS를 사용할 때 서버에 네트워크 요청을 보내고 서버의 데이터를 받아와야 할 때가 있다.

 

가령 넷플릭스를 이용한다고 하면, 서버의 DB에서 영화 정보 등을 받아와야 한다. 

이때 영화 정보 등을 받아오는 작업을 AJAX(Asynchronous Javascript And XML)라고 한다.

이때 중요한 것은 비동기적으로 응답을 받아온다는 것이다.

 

받을 수 있는 응답의 포맷은 JSON, XML, HTML 등 다양하다.

또한 JS는 네트워크 요청을 비동기적으로 해냄으로써

페이지 전체를 리프레시하지 않고 일부분만을 업데이트할 수 있게 해 준다.

 

이번 기록에서는 네트워크 요청에 많이 사용했던 fetch 메서드를 먼저 살펴보고,

axios가 fetch의 어떤 점을 보완해 주는지 다룰 예정이다.

---

 fetch

fetch는 네트워크 요청에 많이 이용되는 메서드이다.

fetch()의 기본 문법은 아래와 같다.

let promise=fetch(url, [options])

• url : 네트워크 요청을 보내고자 하는 url
• options : header나 method 등을 지정하는 옵션

JS는 비동기적 요청에 대해 Promise를 이용해 대응한다.

Promise

promise는 3가지 상태를 가진다.

• pending : 이행하지도, 거부하지도 않은 요청 직전(초기 상태)
• fulfilled : 연산이 성공적으로 완료됨(네트워크 요청 성공)
• rejected : 연산이 실패(네트워크 요청 실패)

Promise를 통해 비동기 작업에 대한 응답을 처리할 수 있는 방법은 두 가지이다.

then()

첫 번째는 then 메서드이다.

promise의 then 메서드는 요청으로 인해 받은 응답을 처리할 수 있는 콜백 함수를 인자로 받는다.

즉, fulfilled 상태가 되면 then 내부 콜백 함수의 인자로 응답값이 전달된다.

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then((response) => response.json())
  .then((json) => console.log(json));

네트워크 요청으로 받은 응답에 대한 데이터 핸들링 로직이 복잡하다면,

then() 메서드가 많아지고 코드 또한 알아볼 수 없게 복잡해지게 된다.

async, await

두 번째는 async/await이다. 

비동기적인 처리는 Promise로 해당 요청을 보관하고, 동기적으로 처리되는 작업을 수행한다.

하지만 await로 비동기적 처리를 하게 되면 해당 작업이 수행될 때까지 기다린다.

const getData=async()=>{
	const res=await fetch('https://jsonplaceholder.typicode.com/posts/1');
	const result=await res.json();
	console.log(result);
	}
getData();

await를 함수 내부에서 사용하고 싶다면 위와 같이 해당 함수를 async 함수로 지정해줘야 한다.

위 두 코드는 같은 결과를 보인다.

---

Axios

위에서 fetch 메서드를 이용해 네트워크 요청에 대한 응답을 받으면,

json 형식으로 바꿔줘야 하는 번거로운 점이 있었다.

또한, axios처럼 모듈화를 통해서 프로젝트에서 유용하게 쓸 수 있는 기능도 없다.

 

Axios는 fetch보다 비교적 쉽고 유용하게 네트워크 요청 작업을 수행한다.

Config

axios({
  url: 'test/url',
  method: 'get',
  data: { 
    test: 'test data'
  }
});

• url : 네트워크 요청을 보낼 url
• method : 요청의 method
• data : 요청 body

axios는 위처럼 method를 지정해 줄 수도 있지만, 아래처럼 자체 메서드를 이용해 지정할 수도 있다.

axios.post(url,[options]);
axios.delete(url,[options]);
axios.patch(url,[options]);
axios.put(url,[options]);

만약 메서드에 대한 명시가 없을 경우 get method가 기본값이다.

모듈화

axios의 create 메서드를 이용해 초기 설정을 할 수도 있다.

import axios from "axios";

export const Axios = axios.create({
  baseURL: process.env.REACT_APP_API_BASE_URL,
  params: {
    api_key: process.env.REACT_APP_API_KEY,
  },
});

위처럼 앞으로 요청에 대한 baseURL, params 등 기본 설정을 지정할 수 있다.

 

아래와 같이 defaults 속성에 값을 할당함으로써 지정하는 방법도 있다.

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = REACT_APP_AUTH_TOKEN;

토큰과 같이 다른 작업 이후에 얻을 수 있는 값들은 create 메서드로 모듈화 하기 힘들다.

따라서 defaults 속성을 이용하면 이후의 요청에 대해 하나하나 지정해 줄 필요가 없다.