[React] axios를 사용하는 이유 (vs fetch)

 
 
Javascript에는 HTTP Request를 위한 방법으로 대표적으로 axios와 fetch가 있습니다.
이번 글에서는 각각의 장단점과 간단한 사용방법을 보면서 비교하고 차이를 알아보겠습니다.
 

Fetch

간단하면서도 강력한 기능을 제공하며, 주로 모던 브라우저에서 사용되는 경향이 있습니다.

[장점]

• ES6부터 도입된 Javascript 내장 라이브러리
• 브라우저 환경에서 사용 가능하며, import 하면 node.js에서도 사용 가능
• Promise 기반
• 사용법이 간단하고 직관적이며, 간단한 요청에서는 불필요한 설정이 없이 사용

[단점]

• HTTP 에러(404, 500 등)를 자동으로 걸러내지 않음
• 응답 데이터가 바로 넘어오지 않아 JSON으로 파싱해야됨
• IE11 및 구형 브라우저 지원은 추가 설정이나 폴리필 필요

// GET 요청
fetch('https://api.example.com/data')
  .then(response => response.json()) // data를 json형태로 파싱
  .then(data => console.log(data))
  .catch(error => console.error('Fetch GET 에러:', error));


// POST 요청
fetch('https://api.example.com/postEndpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    key: 'value'
  })
}).then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Fetch POST 에러:', error));

 
 

Axios

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

[장점]

• Promise 기반
• 요청 취소
• JSON 데이터 자동 변환
• HTTP 상태 코드를 자동으로 확인하고 에러가 발생했을 때 더 자세한 정보를 제공
• 요청이나 응답을 인터셉트하여 수정할 수 있어, 로직을 중앙에서 처리 가능
• XSRF를 막기 위한 클라이언트 사이드 지원

[단점]

• import, require로 모듈 설치가 필요
• 번들 크기가 상대적으로 큰 편이어서, 작은 프로젝트로 진행 시 고려

// axios 모듈
import axios from "axios"

// GET 요청
axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    console.log('Axios GET 성공:', response.data); // 응답값이 json형태로 바로 넘어옴
  })
  .catch(error => {
    console.error('Axios GET 에러:', error);
  });


// POST 요청
const postData = {
  title: 'foo',
  body: 'bar',
  userId: 1
};

axios.post('https://jsonplaceholder.typicode.com/posts', postData)
  .then(response => {
    console.log('Axios POST 성공:', response.data);
  })
  .catch(error => {
    console.error('Axios POST 에러:', error);
  });

 
 

Axios를 사용하는 이유

1. 더 많은 기능 및 편의성 

- axios는 더 많은 기능을 제공하며, 요청과 응답을 보다 쉽게 다룰 수 있는 편의성을 제공합니다. 예를 들어, 요청과 응답을 가공하거나 인터셉터(Interceptors)를 사용하여 요청이나 응답 전에 특정 작업을 수행할 수 있습니다.

2. 자동 JSON 변환

- axios는 자동으로 JSON 데이터를 파싱하거나 시리얼라이즈 해주는 특징을 가지고 있습니다. 반면, fetch는 이러한 기능을 기본적으로 제공하지 않아서 수동으로 처리해야 합니다.

3. 브라우저 호환성

- axios는 브라우저 호환성을 고려하여 개발되었기 때문에 일부 오래된 브라우저에서도 문제없이 동작합니다. 반면에 fetch는 IE11과 같은 오래된 브라우저에서는 지원이 부족할 수 있습니다.

4. 에러 핸들링

- axios는 HTTP 에러 상태 코드를 자동으로 확인하고 에러가 발생했을 때 더 자세한 정보를 제공하는 특징을 가지고 있습니다. 이는 디버깅을 용이하게 만듭니다.

5. 취소 기능

- axios에는 요청을 취소하는 기능이 내장되어 있습니다. 이는 특정 요청을 중단하고 싶을 때 유용합니다.

6. 동시 요청 처리

- axios는 여러 개의 동시 요청을 손쉽게 처리할 수 있는 기능을 제공합니다.
 
 
지금까지 주로 Fetch와 Axios의 장단점을 알아보고 Axios를 사용하는 이유에 대하여 알아보았습니다. Axios가 확실히 더 많은 기능을 가지고 있지만, 프로젝트의 요구 사항, 성능 및 개발자의 개인적인 취향에 따라서는 fetch를 사용하는 것이 더 적절한 경우도 있으니 상황에 맞게 선택하여 사용하시는 것을 추천드립니다.
 
 
 
Reference
https://axios-http.com/kr/docs/intro