웹 개발을 하다 보면 서버와 데이터를 주고받기 위해 HTTP 요청을 보내야 할 때가 많습니다.
대표적으로 Fetch API와 Axios가 많이 사용되는데, 이 둘의 차이를 정리해보겠습니다.
📌 Axios란?
- 외부 라이브러리 (설치 필요: npm install axios)
- Fetch보다 다양한 기능을 지원
- JSON 자동 파싱, 에러 자동 처리, 요청/응답 인터셉터 등 실무에서 많이 사용됨
👉 예시:
import axios from "axios";
axios.get("/api/user")
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});📌 Fetch API란?
- 브라우저에 기본 내장된 HTTP 요청 기능
- 추가 설치 없이 바로 사용 가능
- ES6부터 공식적으로 제공됨
👉 예시:
fetch("/api/user")
.then(response => {
if (!response.ok) {
throw new Error("HTTP Error: " + response.status);
}
return response.json();
})
.then(data => console.log(data))
.catch(err => console.error(err));🛠️ Axios vs Fetch 차이 정리
| 구분 | Fetch | Axios |
|---|---|---|
| 지원 여부 | 브라우저 기본 제공 | 별도 설치 필요 |
| 응답 처리 | response.json()으로 파싱 필요 |
JSON 자동 파싱 |
| 에러 처리 | HTTP 400/500도 "성공"으로 처리됨 → response.ok 직접 확인 |
HTTP 에러를 자동으로 catch로 전달 |
| 요청 취소 | AbortController 사용해야 함 |
CancelToken 제공 (간단) |
| 기능 확장성 | 단순 요청에 적합 | 인터셉터, 헤더 자동 설정, 응답 변환 등 다양한 기능 |
| 호환성 | 최신 브라우저 중심, 구형 브라우저 지원 어려움 | IE 등 구형 브라우저 지원 가능 |
💡왜 Axios를 더 많이 쓸까?
- 인터셉터(Interceptor): 요청 전/후 가로채서 공통 로직 적용 가능 (ex. JWT 토큰 자동 첨부)
- 에러 처리 간편: 400, 500 에러도 catch로 바로 감지 가능
- 브라우저 호환성: 다양한 브라우저 지원
- 코드 가독성: 짧고 직관적인 코드 작성 가능
🔍 정리하자면
- 간단한 요청 → Fetch로도 충분
- 실무/프로젝트 규모가 크다 → Axios 추천
✍🏼 결론:
"Fetch는 가볍고 기본적인 요청에 적합하고, Axios는 실무에서 확장성과 편리성을 고려할 때 더 많이 사용된다."
Full-Stack Developer