[React-Native] 리액트 네이티브 Axios로 웹서버 http 통신(요청)하기

 

왜 Axios 써야 하는가?

react native에서 웹서버에 데이터를 요청하거나 요청한 데이터를 받아올 때 사용하는 API는 대표적으로 Fetch, Axios 가 있습니다. 먼저 두 가지 방식을 비교하며 왜 Axios를 써야 하는지 살펴보겠습니다.

 

 

1. promise API 지원

여기서 promise란 자바스크립트 비동기 처리에 사용되는 객체입니다. 또 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다. 즉 axios는 비동기 통신을 지원합니다.

 

2. json 데이터로 자동변환

Axios는 요청을 보낼 때 자동으로 데이터를 문자열 화합니다. 그러나 Fetch()를 사용할 때는 수동으로 수행해야 합니다. 

 

3. 광범위한 브라우저

Axois는 오래된 브라우저에서 아무런 문제 없이 실행할 수 있습니다. 반면에 Fetch()는 polyfill을 수동 설치하여 비슷한 기능을 구현할 수 있습니다.

 

4. 응답 시간 초과 설정

Axios에서는 config 객체의 optional 속성을 사용하여 요청이 중단되기 전의 시간 (밀리 초)을 설정할 수 있습니다. Fetch()는 AbortController 인터페이스를 통해 유사한 기능을 제공합니다. 그러나 Axios만큼 간단하지는 않습니다.

 

5. 동시 요청

Axios는 axios.all() 사용하여 동시 요청을 기능을 제공합니다.

 

결론적으로 Axios는 대부분의 HTTP 통신 요구에 맞는 적절한 패키지로 사용하기 쉬운 API를 제공합니다. 하지만 fetch API도 facebook에서 기본적으로 쉽게 사용하기 위한 통신 API므로 사용자의 상황과 선호에 따라 무엇을 사용할지 정하면 좋을 것 같습니다. 

 

Axois 사용법

패키지 설치

npm install -save axios

 

GET 방식 요청

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

 

POST 방식 요청

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });