React에서 API 통신: fetch API vs axios 무엇을 선택할까?

React 개발을 하면서 서버와 데이터를 주고 받는 기능은 필수적이다

API 요청을 보낼 때 대표적으로 사용되는 방법으로는 fetch API 와 axios 가 있다.

나는 개발을 하면서 두 방법 중 어떤 것이 더 나을까? 라는 고민이 있었다. 

이 글에서는 fetch API 와 axios를 비교하고,

React 프로젝트에서 어떤 상황에서

어떤 방법을 선택해야 하는지 알아보도록 하겠다. 

fetch API vs axios 비교

1. fetch API 

const fetchData = async () => {
  try {
    const response = await fetch('https://example.com/api', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ key: 'value' })
    });

    if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);

    const data = await response.json();
    console.log('Fetch API Response:', data);
  } catch (error) {
    console.error('Fetch API Error:', error);
  }
};

 

2. axios

import axios from 'axios';

const fetchData = async () => {
  try {
    const response = await axios.post('https://example.com/api', {
      key: 'value'
    });
    console.log('Axios Response:', response.data);
  } catch (error) {
    console.error('Axios Error:', error);
  }
};

 

두 가지 방법의 장점을 비교해 보았을 때,

 

fetch API 의 장점

1. 추가 라이브러리 없이 사용 가능: 브라우저에 내장된 API로 가볍게 사용 가능
2. Promise 기반: async/await을 활용하여 비동기 처리 가능
3. 최신 웹 표준: 브라우저에서 최적화되어 동작

axios 의 장점

1. 자동 JSON 변환: 응답 데이터를 JSON으로 자동 변환
2. 타임아웃 설정 가능: fetch는 기본 타임아웃이 없지만, axios는 timeout 옵션 제공
3. 요청 및 응답 인터셉터 지원: 요청 및 응답을 가로채서 변형할 수 있음
4. 더 나은 오류 처리: HTTP 오류(404, 500 등)를 예외로 처리 가능

각각의 장점에 맞게 

fetch API 의 경우에는 추가 라이브러리 없이 가볍게 사용하거나

브라우저 내장 기능을 활용하여 최소한의 의존성으로 개발하고 싶을 때 사용하는 것이 좋고 

axios 의 경우에는 JSON 자동 변환, 타임아웃, 인터셉터 등 추가 기능이 필요하거나

async/await 기반의 간결한 코드 작성을 원할 때 

React 프로젝트에서 API 호출을 많이 사용해야 할 때 사용하는 것이 좋을 것이다. 

 

결론

React에서 API 호출을 할 때 fetch API 와 axios 는 각각의 장점이 있다

React 프로젝트에서 API 통신을 효율적으로 관리하고 싶다면, 두 방법의 활용도 그리고 장단점을 잘 이해하여 프로젝트에 맞게 선택하여 개발하는 것이 가장 좋은 방법 같다