Axios vs Fetch

🟡 Axios vs Fetch

Axios와 Fetch는 서버와 데이터를 주고받기 위한 HTTP 통신 도구이다.

둘 다 API 요청을 보낼 수 있지만, JSON 데이터를 처리하는 방식에 차이가 있다.

 

◼️ JSON

객체(Object)나 배열(Array)은 그대로 서버와 주고받을 수 없다.

따라서 데이터를 전송할 때는 JSON 문자열(String) 형태로 변환하여 보내고, 받은 후에는 다시 객체나 배열로 변환하여 사용한다.

const user = {
  name: "Kim",
};

 

전송 시

{
  "name": "Kim"
}

• JSON은 문자열 형태의 데이터이므로 서버와 자유롭게 주고받을 수 있다.

 

◼️ Axios

JSON 데이터를 자동으로 JavaScript 객체로 변환해 준다.

따라서 별도의 변환 과정 없이 바로 데이터를 사용할 수 있다.

import axios from "axios";

axios.get("/api/user").then((response) => {
  console.log(response.data);
});

• JSON → 객체 변환 자동 처리.
• response.data로 바로 데이터 사용 가능.

 

◼️ Fetch

별도의 라이브러리 설치가 필요 없으며, 브라우저에서 기본으로 제공하는 HTTP 통신 API이다.

서버에서 받은 JSON 데이터를 자동으로 JavaScript 객체로 변환하지 않기 때문에, response.json()을 호출하여 직접 변환해야 한다.

fetch("/api/user")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

• response.json()을 호출해야 JSON 문자열이 JavaScript 객체로 변환된다.

 

 

📍 POINT 📍

✔️ 객체(Object)와 배열(Array)은 그대로 서버와 주고받을 수 없다. ✔️

✔️ 서버와 데이터를 주고받을 때는 JSON 형식을 사용한다. ✔️

✔️ Axios는 JSON을 자동으로 객체로 변환해 준다. ✔️

✔️ Fetch는 response.json()을 호출하여 직접 변환해야 한다. ✔️

✔️ 둘 다 HTTP 통신이 가능하며, 프로젝트 환경에 맞게 선택하여 사용한다. ✔️

 

 

📋 Axios와 Fetch 비교 📋

항목	Axios	Fetch
설치	필요 (npm install axios)	불필요 (브라우저 기본 제공)
JSON 변환	자동	response.json() 필요
데이터 접근	response.data	response.json() 후 사용
사용 편의성	높음	비교적 코드가 길어짐