2rang25 - Axios vs Fetch

웹 개발에서 HTTP 요청은 필수적인 작업이다. 데이터를 가져오거나, 사용자 정보를 서버에 전송하거나, 외부 API와 통신하기 위해 항상 사용된다. 이러한 HTTP 요청을 처리하기 위한 대표적인 도구가 Axios와 Fetch API이다. 두 도구 모두 Promise 기반으로 동작하지만, 기능과 사용 방식에는 큰 차이가 있다.

이 글에서는 Axios와 Fetch API를 기능적으로 비교하고, 각각의 장단점과 실무 활용 방안을 구체적으로 분석한다. 두 도구를 언제, 어떻게 선택해야 할지 고민 중이라면 이 글을 끝까지 읽어보자.

1. Axios와 Fetch API란?

Axios란?

Axios는 JavaScript HTTP 클라이언트 라이브러리로, Promise 기반으로 동작한다. 기본적으로 브라우저와 Node.js 환경 모두에서 사용할 수 있으며, 간결한 API와 강력한 기능으로 많은 개발자들에게 사랑받고 있다.

Axios의 주요 기능

요청(Request) 및 응답(Response)에 Interceptor를 추가할 수 있음.
JSON 데이터를 자동으로 직렬화(stringify) 및 역직렬화(parse).
요청 타임아웃 설정을 기본 제공.
글로벌 기본값 설정이 가능하여 반복 작업을 줄임.
브라우저 호환성이 뛰어나 오래된 브라우저도 지원.
아래는 Axios 사용 예제이다.

axios.get('/api/data')
  .then((response) => {
    console.log(response.data); // JSON 데이터를 자동으로 파싱
  })
  .catch((error) => {
    console.error('에러 발생:', error);
  });

Fetch API 란?

Fetch API는 ES6에서 도입된 브라우저 내장 API로, HTTP 요청을 처리하기 위한 최신 표준이다. Axios와 달리 브라우저가 기본적으로 제공하므로 별도의 설치가 필요하지 않다. 하지만 Fetch는 간결한 기능만 제공하며, Axios처럼 고급 기능(예: 인터셉터, 타임아웃 설정)은 제공하지 않는다.

Fetch API의 주요 특징

브라우저 내장 API로, 추가 설치가 필요 없음.
JSON 데이터를 수동으로 파싱해야 함.
요청/응답 인터셉터 기능이 없음(직접 구현 필요).
IE 브라우저에서는 동작하지 않음.

아래는 Fetch API 사용 예제이다.

fetch('/api/data')
  .then((response) => response.json()) // JSON 데이터를 수동으로 파싱
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error('에러 발생:', error);
  });

2. Axios와 Fetch API의 주요 차이점

기능 비교

인터셉터 기능

Axios는 요청(Request)와 응답(Response)을 가로채는 인터셉터를 기본 제공한다. 인터셉터를 활용하면, 인증 토큰 추가, 응답 데이터 가공, 에러 처리 등을 손쉽게 구현할 수 있다.

// 요청 인터셉터: Authorization 헤더 추가
axios.interceptors.request.use((config) => {
  const token = localStorage.getItem('jwt');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 응답 인터셉터: 에러 처리
axios.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response.status === 401) {
      console.error('인증 오류');
    }
    return Promise.reject(error);
  }
);

Fetch API에서 인터셉트 구현하기.

Fetch API는 기본적으로 인터셉터를 제공하지 않으므로, 이를 직접 구현해야 한다. fetch를 래핑하여 Axios의 인터셉터와 유사한 기능을 구현할 수 있다.

const customFetch = async (url, options = {}) => {
  const token = localStorage.getItem('jwt');
  const headers = {
    ...options.headers,
    Authorization: token ? `Bearer ${token}` : undefined,
  };

  const response = await fetch(url, { ...options, headers });
  if (!response.ok) {
    if (response.status === 401) {
      console.error('인증 오류');
    }
    throw new Error('HTTP 에러');
  }
  return response.json();
};

JSON 데이터 처리하기.

Axios: JSON 데이터를 자동으로 파싱해 response.data로 반환한다.
Fetch API: JSON 데이터를 수동으로 변환해야 하며, response.json() 메서드를 호출해야 한다.

JSON 자동 변환 예제 - Axios

axios.get('/api/data').then((response) => {
  console.log(response.data); // 자동으로 JSON 파싱됨
});

JSON 수동 변환 예지 - Fetch

fetch('/api/data')
  .then((response) => response.json()) // 수동으로 JSON 파싱 필요
  .then((data) => console.log(data));

3. Axios와 Fetch API의 장단점

Axios 장점

사용 편의성: JSON 변환, 인터셉터, 타임아웃 등 편리한 기능을 기본 제공.
광범위한 호환성: 오래된 브라우저와 Node.js 환경에서도 문제없이 동작.
글로벌 설정 지원: API URL, 헤더 등 기본값을 설정해 반복 작업을 줄일 수 있음.

Axios 단점

의존성: 외부 라이브러리를 설치해야 하며, 프로젝트 크기가 커질 수 있음.
무거운 기능: 단순한 작업에는 과도하게 느껴질 수 있음.

Fetch API 장점

경량성: 브라우저 기본 제공으로 외부 라이브러리 설치가 필요 없음.
모듈화 가능: 간단한 구조로 래핑해 기능을 커스터마이징 가능.
최신 표준: 최신 브라우저에 최적화된 방식.

Fetch API 단점

인터셉터 미제공: 요청/응답 가로채기 기능이 없어 직접 구현해야 함.
타임아웃 처리 미지원: 기본적으로 요청 제한 시간을 설정할 수 없음.
에러 처리 부족: HTTP 상태 코드를 수동으로 확인해야 함.

4. 실무에서 선택 기준

Axios를 선택하는 경우

복잡한 인증 작업이 필요한 경우 예: JWT 토큰 추가, 리프레시 토큰 처리
다양한 HTTP 요청 처리가 필요한 경우 글로벌 기본값 설정, 타임아웃, 응답 데이터 가공 등이 필요한 프로젝트
Node.js 환경에서 서버와 클라이언트를 동시에 개발하는 경우

Fetch API를 선택하는 경우

간단한 요청만 필요한 경우 GET/POST 요청 위주로, 가벼운 프로젝트에 적합.
최신 브라우저만 타겟으로 하는 경우 브라우저 내장 API로 Fetch는 IE를 제외한 최신 브라우저에서 완벽히 동작.
모듈화와 커스터마이징을 직접 구현하고 싶은 경우

5. 결론

Axios와 Fetch API는 각각의 장단점이 명확하다.

Axios는 기능이 많고 사용이 간편해 복잡한 요구사항을 가진 프로젝트에 적합하다.
Fetch API는 경량성 덕분에 간단한 HTTP 요청 처리에 적합하며, 커스터마이징이 필요할 때 유리하다.

결국, 프로젝트의 요구사항과 환경에 맞는 도구를 선택하는 것이 가장 중요하다. 어떤 도구를 선택하든 요청 처리의 원리를 이해하고 상황에 맞게 활용하는 능력이 더욱 중요한 것이다.

Axios vs Fetch

1. Axios와 Fetch API란?

2. Axios와 Fetch API의 주요 차이점

3. Axios와 Fetch API의 장단점

4. 실무에서 선택 기준

5. 결론

추천 글