[리액트] fetch와 axios 차이

Fetch란?

Fetch API는 네트워크 요청을 위해 fetch()라는 메서드를 제공하는 브라우저 내장 인터페이스입니다. 

 

• 모던 브라우저에 기본 내장되어 있어 별도의 설치가 필요 없습니다. 
• 비동기 작업을 쉽게 처리할 수 있도록 Promise기반로  요청 및 응답을 처리합니다. 
• HTTP의 404 or 500 에러를 자동으로 처리하지 않기 때문에 응답 객체의 ok속성을 확인한 후 수동으로 처리해주어야 합니다. (. catch 사용)
• 응답 본문은 기본적으로 스트림 형태로 제공되기 때문에 수동으로 데이터 직렬화를 해야 합니다.

 

💡 Promise

자바스크립트에서 비동기 작업을 처리할 때 사용하는 객체입니다.

 

[네트워크 요청]

• 성공 시 resolve promise 응답 
• 실패 시 reject promise  응답 

 ⚠️ HTTP 상태 코드가 404 or 500

       HTTP 상태 코드가 404나 500이어도 네트워크 요청 자체는 성공한 것으로 간주되기 때문에 응답 객체의 ok 속성을 확인하여 직접 에러 처리를 해야 합니다.

 

데이터 직렬화 하기  

데이터 직렬화 전

직렬화 전에는 fetch()가 반환한 응답 객체 전체가 출력되어, 헤더, 상태 코드 등 메타 정보만 볼 수 있고 실제 데이터는 보이지 않습니다.

fetch(url, {
  method: "GET",  
  headers: {
    "Content-Type": "application/json",
    "Authorization": `Bearer ${token}`
  }
})
.then(res => console.log(res));

 

응답 값

직렬화 전 데이터

 

데이터 직렬화 후

res.json() 같은 메서드로 직렬화(파싱) 해야 실제 JSON 데이터가 Promise로 반환되어 사용할 수 있습니다.

fetch(url, {
    method: "GET",
    headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${token}`
    }
})
.then((res) => res.json()) //json 직렬화
.then((data) => {
    console.log(data); //실제 데이터 출력
 });

 

응답 값

 

직렬화 후 데이터

 

---

Axios란?

Pormise 기반 HTTP 클라이언트로 요청 및 응답을 처리하는데 사용되는 라이브러리입니다. 

 

• 브라우저와 Node.js 환경에서 모두 사용할 수 있으며 별도의 설치가 필요합니다. 
• Fetch와 동일하게 Promise 기반으로 요청 및 응답을 처리합니다. 
• 요청이나 응답을 가로채서 중간에 로직을 추가하거나 헤더를 수정하는 작업을 할 수 있습니다. 
• 자동으로 JSON 파싱을 수행하며 HTTP 에러 상태도 자동으로 처리해 줍니다.
• 요청 취소, 요청 타임아웃 설정을 지원합니다. (요청 취소를 통해 불필요한 요청을 방지합니다.)

 

 

💡 Axios 설치

설치 명령어

npm install axios

 

프로젝트에서 사용하는 방법

import axios from "axios";

---

Fetch와  Axios 비교

구분	Fetch	Axios
설치 여부	인터페이스 (설치 필요 ❌)	라이브러리 (설치 필요 ⭕)
에러 및 데이터 직렬화 처리	수동으로 작성	자동으로 처리
지원 환경	최신 브라우저에서 동작	모든 브라우저에서 동작
특징 및 기능	가볍지만, 고급 기능 ❌	인터셉터, 요청 취소 등 기능 포함

 

 

백엔드 API 호출하기 

아래 포스팅에서는 Axios를 선택한 이유와 GET 요청을 보내는 방법을 정리했습니다.

(POST, DELETE 등의 요청은 추후 구현 후 추가할 예정입니다.)

[리액트] 백엔드 API 호출 (featGet 요청 보내기. Axios 선택 이유, )

 

---

📚 참고 자료

 

[JavaScript] Fetch와 Axios의 차이점 비교

 

 

Axios in React: A Guide for Beginners - GeeksforGeeks

 

 

[React] React 에서 Axios 사용하기