[React] FETCH 와 AXIOS 의 차이점

What is difference between Fetch and Axios ? JS에서 많이 사용하는 HTTP 기반 비동기 통신 방법인 Axios 와 Fetch 의 차이에 대해 알아보도록 하자.

Axios/Fetch 생겨난 배경

기존의 웹에서는 어떤 정보들을 비동기로 요청하기 위해서 XHR(XML HTTP Request) 객체를 사용하여야만 했다고 한다.. 근데 XHR은 되게 불친절하게 정보를 제공한다고 한다. (데이터를 통째로 줘버린다던지..)
요청의 상태나 변경을 계속 보고 있게 하려면 이벤트를 추가로 등록해서 변경사항들을 다시 받아야 하고.. 요청의 성공/실패/상태변경 등에 따른 분기를 나누는 것도 복잡했다.

→ 새로운 url을 호출할 때마다 모든 페이지를 새롭게 그려야 하는 등의 흔히 생각하는 동기적으로 정보를 요청했을 때 떠올릴 수 있는 문제가 일어나는 듯

그래서 *비동기적*으로 정보를 요청하는 게 필요했다!

비동기적으로 처리를 하게 되면 페이지를 렌더링하고 → 필요에 따라 데이터만 바꿔오게 되는 것이다
서버는 데이터를 쪼금만 보내줘도 되서 좋고.. 클라이언트는 조금만 렌더링해도 되서 부하가 적게 걸리게 되는 거다. 개이득

혹시나 비효율적이라고 하는 모체인 XHR 이 궁금하다면 XMLHttpRequest API Document 과 XMLHttpRequest Document 를 읽어보도록 하자. 개념과 사용법 정도가 나와있다.

Axios

Axios 는 Promise 기반으로 node.js와 browser를 연결해주는 HTTP 통신 라이브러리이다.

비동기로 HTTP 통신을 가능하게 해주며 return을 promise 객체로 제공해주기 때문에 reponse 데이터를 다루기도 훨씬 쉽게 되어있다.

AXIOS의 POST 방법 예시

axios({
	method: 'post',
	url: '호출할 url',
	data: {
      //요청할 때 필요한 데이터 
      데이터명1: "데이터값1",
      데이터명2: "데이터값2",
      ...
    }
});

이런 형태를 띈다.

Fetch

ES6 버전 부터 javascript의 내장 라이브러리 로 들어오게 된다.
Fetch 또한 Promise 기반으로 만들어졌기 때문에, Axios와 마찬가지로 데이터를 다루는 게 어렵지 않고, 내장 라이브러리 라는 장점으로 인하여 편리성 부분에서 강점을 띈다.

Fetch의 POST 방법 예시

const url = '요청할 url 주소'
const option = {
	method: 'POST',
	header: {
      'Accept': 'application/json',
      'Content-Type': 'application/json';charset='UTP-8'
    },
  	body: JSON.stringify({
    	데이터명1: '데이터값1',
      	데이터명2: '데이터값2'
    })
}

fetch(url,options)
	.then(response => console.log(response))

Axios vs. Fetch

Axios
장점

• Fetch 에서는 지원하지 않는 기능들이 있다. (Response Timeout 처리 방법 등..)
• Cross Browsing 방법에 특화되어 있기 때문에 브라우저 호환성이 뛰어나다.
  [ Cross Browsing: 웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게 나오는 작업을 의미한다. 호환성 ]

단점

• 별도의 모듈을 설치 해주어야 한다.

Fetch
장점

• 내장 라이브러리이기에 사용하는 프레임워크가 비교적 안정적이지 않을 때 사용하면 좋다.
• 내장 라이브러리이기에 별도의 import 행위가 필요하지 않는다.
  단점
• internet explorer 의 경우 fetch를 지원하지 않는 버전도 존재한다. (브라우저 호환성이 상대적으로 떨어짐)
• Error handling 관련한 이슈 존재.
  • Catch에 걸렸을 때 이후 .then(~)을 실행함. Axios의 경우에는 .then(~) 을 실행하지 않고, console 창에 해당 에러에 대한 log를 보여준다.

그래서 ?

1. 대부분 (복잡하지 않은 프로그램) 두 가지 다 사용하는데 무리가 없고, 잘 동작한다.
   1.1. React 에서는 주로 Axios 를
   1.2. React Native 에서는 주로 Fetch 를 사용
2. 장단점 나열에서도 눈치 챌 수 있듯, axios가 확장성이나 기능 부분에서 더 이점을 많이 가지고 있다.
   2.1. 요청 취소 같은 기능을 이용하려면 fetch가 아닌 axios 같은 다른 라이브러리를 사용해주어야 한다.
3. 같은 맥락으로 fetch가 더 가볍고, axios가 상대적으로 좀 더 무겁다고 생각하면 된다.

---

개발 다 해놓고 이제야 장단점 알아보는 🐵