[React Native] 서버에 요청해서 JSON 받아 오는 방법 (fetch vs. axios)

 

 

매주 한 번씩 또는 앱을 켤 때마다

서버에 요청해서 서버가 가지고 있는 일주일치 스케쥴 정보를 받아와야 하는데

이 때 사용하는 게 axios 또는 fetch다.

 

처음에 구글에 react native json request 라고 검색했더니

fetch가 많이 나와서 fetch로 하려고 했는데,

팀원은 axios를 했다고 하길래 두 개 비교글을 검색해봤다.

 

 

아래 글을 참고(라고 쓰고 번역이라고 읽음)해서 적도록 하겠다 :)

결론만 먼저 말하자면 나는 fetch가 아닌 axios를 선택했다.

Difference between Fetch and Axios.js for making http requests - GeeksforGeeks

 

 

Fetch란?

참고자료 리액트 네이티브 공식 문서 & MDN 가이드

리액트 네이티브는 네트워킹을 위해 Fetch API를 제공한다. Fetch는 XMLHttpRequest나 다른 네트워킹 API와 비슷하다.

Fetch API는 요청과 응답 같은 HTTP 접근, 생성을 위한 자바스크립트 인터페이스를 제공한다. (모라는거야ㅋ) 또한, fetch() 메서드를 제공해서 쉽고 논리적인 방법으로 네트워크에 비동기 접근이 가능하다.

 

그러니까, 쉽게 말하면! 백엔드(서버)에 네크워크 API 요청을 보낼 때(GET이든 POST든) 사용하는 메서드가 fetch()인 것!

정말 어렵게도 써놨다 ㅡㅡ

 

 장점 

 - 내장되어 있으므로 따로 설치해서 쓸 필요가 없다

 - 업데이트가 잦은 React Native의 경우 버전이 맞지 않아 생기는 문제를 방지할 수 있다.

 - 가볍다 (설치X니까)

 

 (내 기준) 단점 

 - 데이터가 문자열로 오기 때문에, json으로 다시 변환해주어야 한다. 

  (Fetch is a two-step process when handling JSON data- first, to make the actual request;

   second, to call the .json() method on the response.)

 - Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+ 만 지원한다. (사실 나는 노상관)

 

Axois란?

fetch처럼 프론트에서 서버로 보내는 HTTP 요청과 응답을 지원하는 자바스크립트 라이브러리 중 하나이다. 라이브러리이므로 Node.js에 추가로 설치해서 사용해야 한다.

$ npm install axios

 

 장점 

 - 배워 봤다 ( ㅋㅋ 내 기준 장점 ㅎㅎ)

 - 따로 JSON 파싱할 필요가 없다!

 - 반환되는 데이터가 object 형태로 온다

 

 단점 

 - 추가 설치하는 것이라서 fetch에 비하면 무겁다

 - 업데이트가 빠른 프레임워크의 경우, 업데이트를 따라가지 못할 때가 있다

 

 

 

fetch vs. axios

(곧 한국어로 번역하겠음)

 

 

fetch가 아닌 axios를 선택한 이유

1. 그래도 한 번 써봤다.

2. 우리 팀원이 이미 axios로 코드를 짰기 때문에,

프론트엔드 코드 통일을 위해서

3. JSON으로 다시 파싱할 필요가 없어서!