[React] Ajax와 Axios, fetch 차이점과 비교

1- Ajax란?

Asynchronous JavaScript And XML: 자바스크립트를 사용한 비동기 통신, 클라이언트와 서버간에 데이터를 주고받는 기술이다.

서버와 비동기적으로 통신함으로 인해 전체 웹페이지를 다시 불러오는 동기 방식과는 다르게 해당 부분의 사용자 인터페이스만을 갱신할 수 있다. (ex. 페이스북에서 좋아요 버튼이 눌릴때마다 페이지가 리렌더링되는 것을 방지)

 

Ajax 사용법

1. JQuery 설치하여 $.ajax() 사용
2. axios 설치하여 axios.get() 사용 npm install add axios --save
3. 순수 자바스크립트 문법 fetch() 사용

2- Fetch 란?

fetch("<https://localhost:3000/user/post>", {
	method: "POST",
	headers: {
		"Content-Type": "application/json",
	},
	body: JSON.stringify({
		id: "asd123",
		description: "hello world",
	}),
}).then((response) => console.log(response));

• Fetch의 장점
  1. 자바스크립트 내장 라이브러리 이므로 별도로 import 할 필요가 없다.
  2. Promise 기반으로 만들어졌기 때문에 데이터를 다루기 편리하다.
  3. 내장 라이브러리이기 때문에 업데이트에 따른 에러 방지가 가능하다.
• Fetch의 단점
  1. 지원하지 않는 브라우저가 존재한다.
  2. 네트워크 에러 발생시 response timeout이 없어 기다려야 한다.
  3. JSON으로 변환해주는 과정이 필요하다.
  4. axios에 비해 기능이 부족하다.

3- Axios 란?

axios는 Node.js와 브라우저를 위한 Promise API를 활용하는 HTTP 통신 라이브러리이다. 비동기로 HTTP 통신을 할 수 있으며 return 을 promise 객체로 해주기 때문에 response 데이터를 다루기 쉽다.

axios({
	method: "post"
	url: "<https://localhost:3000/user>",
	data: {
		userName: "Cocoon",
		userId: "co1234"
	}
}).then((response) => console.log(response));

• Axios의 장점
  1. response timeout 처리 방법이 존재한다. (fetct에는 존재 x)
  2. Promise 기반으로 만들어졌기 때문에 데이터를 다루기 편하다.
  3. 크로스 브라우징 최적화로 브라우저 호환성이 뛰어나다. (구형 브라우저도 지원한다.)
• Axios의 단점
  1. 사용을 위해 모듈 설치가 필요하다. npm install axios

4- Axios, Fetch 비교

Axois Fetch

Axois	Fetch
써드파티 패키지로 설치 쉬움 (npm install axios)	Built-in-APIs로 별도의 설치 없이, 모던 브라우저에서 사용 가능
wide browser 지원	크롬 42+, firefox 39+, edge 14+, safari 10.1+ 만 지원 하위 호환성을 지원하려면 polyfill을 이용해야 한다.
XSRF(=CSRF, 서버공격) Protection 보안 기능 제공	X
자동 JSON 데이터 변환 지원	JSON 데이터 헨들링 위해 추가 절차 필요 Fetch interface의 json()을 이용하는 로직을 추가
Request 취소, Request Timeout 설정 가능	X, AbortController 이용하여 구현해야 한다.
HTTP Requests와 Intercept 가능	Intercept Requests 기본적으로 제공되지 않음, Global Fetch Method를 Overwrite하여 나의 인터셉트 정의 가능
Download Progress 지원	Upload Progress 지원안함,  Response Object의 Body Property를 통해 제공되는 ReadableStream 인스턴스 이용 가능