웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > react native

react native ajax 로딩하는 방법, fetch

Last Modified : 2018-11-05 / Created : 2018-08-28
7,913
View Count
react native에서 ajax를 사용하여 네트워크를 사용하는 방법, api를 호출하는 방법을 알아봅니다. react native는 어떻게 사용할까요?




# react에서 ajax 호출 네트워크 사용방법

먼저 react native에서 ajax를 사용하려면 몇 가지 방법이 있습니다. 가장 먼저 자바스크립트의 XMLHttpRequest를 사용하는 방법과 react native의 fetch()를 사용하는 방법입니다.또 async를 사용할 수 있죠. 아래는 많이 쓰이고 간단한 방법인 fetch()를 알아봅니다.


! fetch()를 사용하여 ajax 호출하기

fetch의 문법을 먼저 알아봅니다. 가장 간단한 방법으로 아래와 같이 사용합니다.

fetch(url, [options])

이때 option은 선택할 옵션을 입력하며 없어도 fetch()는 동작합니다. 그럼 아래의 예제에서 간단한 api를 호출해보도록 하겠습니다.



# react native fetch() 예제보기

아래와 같은 api를 호출하는 경우 간단한 예제를 만들어 보려합니다.

url: https://webisfree.com/testapi/
method: GET

일단 fetch를 react-native에서 사용할 수 있도록 모듈을 추가합니다
import { fetch } from 'react-native';

이제 api를 호출해야하겠죠. 이를 위해서 함수 getSitename()이라는 임의의 함수를 만들어보려합니다.
getSitename() {
  fetch('https://webisfree.com/testapi/').then((response) => {
    // Code here
  });
};


! React native POST method 통신 예제보기

위 예제는 GET Method로 통신하는 경우의 예제입니다. 만약 POST 방식인 경우라면 아래의 예제와 같이 사용합니다.
fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    siteUrl: 'webisfree.com',
    siteName: 'WEBISFREE',
  }),
});

fetch()를 사용할때 url 주소 뒤에 header 정보 및 body를 정의하여 {}안에 전달할 수 있습니다. 물론 method값 POST를 PUT, DELETE 등으로 바꾸어 사용할 수 있습니다.

body안에는 전달할 파라미터를 입력하게되는데 JSON을 문자열로 변환 후 전달하기 위해서 stringify()를 사용하게됩니다.



# 마치면서

앱에서 fetch()를 사용하여 네트워크 통신을 하는 경우 여러가지 제약사항 등 생각하지 못한 이슈가 많이 발생할 수 있습니다. 대표적으로 SSL 보안 프로토콜이 필요할 수 있습니다. 같은 SSL이라도 지원 범위나 안드로이드 버전에 따라 네크워크 에러가 발생할 수 있으니 참고하시기 바랍니다.

Previous

하이브리드앱? React Native 알아보기

Previous

react native standalone 방법으로 apk 만들기