[ Fetch와 Axios 기초 강좌 ③] Fetch와 Axios 비교: 공통점과 차이점

왜 비교해야 할까?

프론트엔드에서 서버와 데이터를 주고받을 때 가장 많이 사용되는 방식이 Fetch API와 Axios 라이브러리입니다.
두 방식 모두 동일한 목표(HTTP 요청)를 수행하지만, 사용법과 기능, 편의성에서 차이가 있습니다.
실무에서 어떤 것을 선택할지 판단하기 위해 차이점을 명확히 이해해야 합니다.

공통점

• 둘 다 **HTTP 요청(GET, POST, PUT, DELETE 등)**을 보낼 수 있음
• **비동기 처리(Promise 기반)**을 사용하여 결과를 받아옴
• 요청 시 headers, body 설정 가능
  
  

주요 차이점 정리

항목 Fetch Axios

기본 제공	브라우저 내장, 별도 설치 불필요	외부 라이브러리, 설치 필요 (npm install)
응답 처리	.json()으로 수동 파싱 필요	응답이 자동으로 .data에 파싱됨
에러 처리	HTTP 오류도 .then()으로 들어옴	HTTP 오류는 .catch()로 자동 처리됨
요청 취소	AbortController 사용 필요	CancelToken 또는 AbortController 지원
인터셉터 지원	미지원	요청/응답 가로채는 인터셉터 지원
기본 설정 재사용	직접 설정 필요	인스턴스를 통해 baseURL, headers 등 관리 가능

실전 코드 비교

1. GET 요청

Fetch 방식

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => {
    if (!response.ok) throw new Error("서버 응답 오류");
    return response.json();
  })
  .then(data => console.log("데이터:", data))
  .catch(error => console.error("에러:", error));

Axios 방식

import axios from "axios";

axios.get("https://jsonplaceholder.typicode.com/posts")
  .then(response => console.log("데이터:", response.data))
  .catch(error => console.error("에러:", error));

2. POST 요청

Fetch 방식

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ title: "제목", body: "내용", userId: 1 })
})
  .then(res => res.json())
  .then(data => console.log("작성 결과:", data));

Axios 방식

axios.post("https://jsonplaceholder.typicode.com/posts", {
  title: "제목",
  body: "내용",
  userId: 1
})
  .then(response => console.log("작성 결과:", response.data));

언제 어떤 걸 사용할까?

• 간단한 작업이나 빠른 실험에는 fetch()도 충분
• 실무에서의 유지보수, 에러처리, 공통 설정 관리가 중요하다면 axios 추천
• 팀 프로젝트에서는 Axios의 인터셉터와 인스턴스 설정이 강력한 장점
  
  

단계 요약

• Fetch와 Axios 모두 비동기 HTTP 요청 처리 도구
• Axios는 자동 응답 처리, 에러 핸들링, 설정 재사용이 뛰어남
• 실무에서는 대부분 Axios 사용, Fetch는 학습 또는 간단 작업에 적합
• 사용 목적에 따라 도구를 선택하는 것이 중요
  
  

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.