[React] Fetch vs Axios 어떤 HTTP 클라이언트를 사용할까?

지금까지 바닐라 JS건, 리액트건 모두 서버가 없는 환경에서 작업을 하다 보니 새로고침을 하면 자동으로 값이 날아갔는데, 이제는 서버와의 통신 하기전에 징검다리 역할을 해줄 fetch와 axios를 간단히 비교해보자

💡 Fetch

• Fetch는 자바스크립트의 내장 함수로, HTTP 요청을 보내고 응답을 처리하는 데 사용된다.

장점

• 브라우저 내장 API: 별도의 설치가 필요 없다.
• Promise 기반: 비동기 작업을 쉽게 처리할 수 있다.
• 단순하고 직관적: 기본적인 사용법이 간단하다.

단점

• 구형 브라우저 지원 부족: IE11 등에서는 지원되지 않는다.
• 기본 기능만 제공: 고급 기능은 직접 구현해야 합니다.
• 에러 핸들링 번거로움: HTTP 에러를 네트워크 에러로 간주하지 않으므로, 직접 확인이 필요하다.

예제코드

fetch('/api/data')
  .then(response => {
    if (!response.ok) throw new Error('네트워크 응답이 정상적이지 않습니다');
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch 에러:', error));

💡 Axios

Axios는 fetch보다 더 많은 기능을 제공하는 인기 있는 HTTP 클라이언트 라이브러리이다.

장점

• 다양한 기능 제공: 요청/응답 인터셉터, 요청 취소, 타임아웃 설정, JSON 자동 변환 등을 지원.
• 자동으로 JSON 데이터 변환: 응답 데이터를 자동으로 변환한다.
• 커스텀 인스턴스와 인터셉터: 이 기능을 사용하면 코드 재사용성이 높아진다.
• 크로스 브라우징에 유리: 구형 브라우저에서도 잘 동작한다.

단점

• 추가 설치 필요: 별도의 라이브러리 설치가 필요합니다.
• 패키지 크기: Fetch에 비해 크기가 큽니다.

예제코드

import axios from 'axios';

axios.get('/api/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Axios 에러:', error));

추가적으로 왜 Axios를 많이 사용하는지에 대해 코드로 알아보자

1. 자동 JSON 변환

Axios:

axios.get('/api/data').then(response => console.log(response.data));

Fetch:

fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data));

2. 커스텀 인스턴스와 인터셉터

• 코드 재사용성이 높아 관리가 용이하다.

const apiClient = axios.create({ baseURL: 'https://api.example.com' });

apiClient.interceptors.request.use(config => {
  // 요청 전에 수행할 작업
  return config;
}, error => {
  return Promise.reject(error);
});

apiClient.interceptors.response.use(response => {
  // 응답 데이터를 가공하거나 로그를 남길 수 있음
  return response;
}, error => {
  return Promise.reject(error);
});

apiClient.get('/endpoint')
  .then(response => console.log(response.data))
  .catch(error => console.error('Axios 에러:', error));

Fetch와 Axios는 각각의 장단점이 있는데, 간단한 HTTP 요청에는 Fetch가, 더 많은 기능과 크로스 브라우징 지원이 필요하다면 Axios가 적합한 것 같다.!