[React] Axios와 Fetch

HTTP 요청과 Axios, Fetch란?

HTTP 요청이란?

• 웹 브라우저와 서버 간에 데이터를 주고받기 위해 사용하는 프로토콜입니다.
• 대표적인 HTTP 요청 메서드:
  • GET → 데이터를 가져올 때 사용
  • POST → 데이터를 서버에 보낼 때 사용
  • PUT → 기존 데이터를 수정할 때 사용
  • DELETE → 데이터를 삭제할 때 사용

---

Axios란?

• Promise 기반의 HTTP 요청 라이브러리로, Fetch보다 사용하기 편리한 기능을 제공합니다.
• JSON 변환이 자동으로 이루어지며, HTTP 요청을 더 간단하게 관리할 수 있습니다.
• npm install axios 또는 yarn add axios로 설치 후 사용 가능합니다.

Axios 기본 사용 예제

import axios from 'axios';  

axios.get('https://jsonplaceholder.typicode.com/posts/1')  
  .then(response => console.log(response.data))  
  .catch(error => console.error('Error:', error));  

---

Fetch API란?

• JavaScript에서 기본적으로 제공하는 비동기 HTTP 요청 API입니다.
• window.fetch() 메서드를 사용하여 서버와 데이터를 주고받을 수 있습니다.
• Promise 기반이며, async/await 문법과 함께 사용할 수 있습니다.

Fetch 기본 사용 예제

fetch('https://jsonplaceholder.typicode.com/posts/1')  
  .then(response => response.json())  // JSON 변환  
  .then(data => console.log(data))  
  .catch(error => console.error('Error:', error));  

---

Axios vs Fetch 차이점

비교 항목	Fetch	Axios
지원 여부	브라우저 내장 API	별도 설치 필요 (npm install axios)
기본 제공 기능	최소한의 기능 제공	JSON 자동 변환, 응답 타임아웃, 요청 취소 기능 제공
JSON 변환	response.json()을 수동 호출해야 함	자동으로 response.data에 JSON 변환됨
에러 처리	HTTP 400~500 에러는 catch에서 감지되지 않음	모든 요청 오류를 catch에서 감지 가능
요청 취소 기능	기본적으로 제공되지 않음	axios.CancelToken을 사용하여 요청 취소 가능
타임아웃 설정	직접 구현해야 함	timeout 옵션 제공
인터셉터 기능	없음	request, response 인터셉터 제공

---

Axios와 Fetch의 장단점

Fetch의 장점

1. 기본적으로 제공되는 API → 별도 설치가 필요 없음
2. 모던한 Promise 기반 API → async/await과 함께 사용 가능
3. 가벼운 크기 → 추가적인 라이브러리를 설치할 필요 없음

Fetch의 단점

1. JSON 변환을 직접 처리해야 함 (response.json())
2. HTTP 오류(400~500)를 자동으로 감지하지 않음
3. 타임아웃 설정, 요청 취소 기능이 없음

---

Axios의 장점

1. JSON 자동 변환 → response.data로 바로 사용 가능
2. 에러 처리가 간편함 → HTTP 400~500 에러도 catch에서 감지 가능
3. 요청 취소 기능 제공 → CancelToken을 사용하여 요청 취소 가능
4. 인터셉터 기능 제공 → 요청과 응답을 가로채서 가공 가능

Axios의 단점

1. 별도로 설치해야 함 (npm install axios)
2. 파일 크기가 Fetch보다 큼

---

Axios와 Fetch, 언제 사용할까?

Fetch가 적합한 경우

• 브라우저 기본 API를 사용하여 별도 라이브러리 없이 간단한 요청을 처리하고 싶을 때
• 외부 라이브러리를 설치하고 싶지 않을 때

Axios가 적합한 경우

• 자동 JSON 변환, 요청 취소, 인터셉터 기능이 필요한 경우
• 에러 처리를 더욱 직관적으로 관리하고 싶은 경우
• RESTful API 요청이 많은 프로젝트에서 사용하려는 경우

---

결론

• Fetch는 브라우저 기본 API로 가볍고 간단한 HTTP 요청을 처리할 때 적합합니다.
• Axios는 JSON 자동 변환, 에러 처리, 요청 취소 등의 기능이 포함되어 있어 실무에서 더 많이 사용됩니다.