[React] Axios vs Fetch: HTTP 요청 라이브러리 비교 분석

웹 개발을 공부하면서 가장 기본이 되는 개념 중 하나가 뭘까?

바로 필자는 HTTP 요청이라고 생각한다!

오늘은 필자가 애용하는 Axios와 일반 Fetch에 대해서 비교하고 개념을 정리해보고자 한다.

---

HTTP 요청이란?

HTTP 요청은 클라이언트(브라우저)가 서버와 통신하기 위해 사용하는 프로토콜이다.

예를 들어, 우리가 웹사이트에서 로그인을 하거나, 게시글을 작성하거나, 상품을 검색할 때마다 HTTP 요청이 발생한다.

---

Fetch API 소개

Fetch API는 자바스크립트에 내장된 HTTP 클라이언트로, 별도의 설치 없이 사용할 수 있다는 장점이 있다.

Promise 기반으로 작동하며, 모던 자바스크립트의 비동기 처리를 잘 보여주는 API이다.

기본적인 Fetch의 사용 예시는 아래와 같다.

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

위 코드에서는 fetch를 사용해 GET 요청을 보내고, 응답을 JSON 형태로 파싱한 후 처리하는 과정을 보여준다.

response.ok를 확인하여 HTTP 상태 코드가 200-299 범위인지 검증하고, 에러 처리도 포함하고 있다.

---

Axios 라이브러리 소개

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트이다.

Fetch API보다 더 많은 기능을 제공하며, 사용하기 편리한 인터페이스를 제공한다.

기본적인 Axios의 사용 예시는 아래와 같다.

import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

// async/await 사용 예시
async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
  } catch (error) {
    console.error('Error:', error);
  }
}

위 코드는 Axios를 사용한 GET 요청의 예시를 보여준다.

Fetch와 달리 JSON 변환이 자동으로 이루어지며, 에러 처리가 더 직관적이다.

---

Fetch vs Axios

Fetch와 Axios는 각각 다음과 같은 특징을 가지고 있다.

Fetch

• 브라우저 내장 API로 별도 설치가 필요 없다.
• 최신 브라우저에서 지원되며 Promise 기반으로 작동한다.
• 다만 JSON 데이터를 수동으로 변환해야 하고, 타임아웃 설정이 기본적으로 제공되지 않는다.

Axios

• JSON 데이터 자동 변환을 제공하고, 요청과 응답 인터셉터를 사용할 수 있다.
• HTTP 요청 취소와 타임아웃 설정이 가능하며, 광범위한 브라우저 지원을 제공한다.
• XSRF 보호도 기본적으로 제공된다.

POST 요청 비교도 한 번 해보고자 한다. 아래 예시 코드를 참고하자.

// Fetch를 사용한 POST 요청
fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    name: 'John Doe',
    email: 'john@example.com'
  })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// Axios를 사용한 POST 요청
axios.post('https://api.example.com/users', {
  name: 'John Doe',
  email: 'john@example.com'
})
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

위 예시에서 볼 수 있듯이, Axios는 headers와 body를 설정하는 과정이 더 간단하다.

Fetch는 body를 직접 JSON.stringify()로 변환해야 하지만, Axios는 이를 자동으로 처리해준다.

 

HTTP 요청을 처리하는 방법으로 Fetch와 Axios 모두 훌륭한 선택이 될 수 있다고 생각한다.

간단한 요청만 필요하고 추가 라이브러리 설치를 피하고 싶다면 Fectch가,

반면 더 많은 기능이 필요하고, 편리한 에러 처리와 인터셉터 등의 기능이 필요하다면 Axios가 적합할 것이다!