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이라도 지원 범위나 안드로이드 버전에 따라 네크워크 에러가 발생할 수 있으니 참고하시기 바랍니다.