1. Home
  2. 리액트 네이티브[React Native] 0.4x
  3. 기본[THE BASICS]
  4. 네트워킹[Networking]

네트워킹[Networking]

많은 모바일 앱은 원격 URL에서 리소스를 로드해야 합니다. REST API에 대한 POST 요청을 작성하거나 다른 서버에서 정적 컨텐츠 청크를 가져와야 할 수 있습니다.

Fetch 사용하기

React Native는 네트워킹 요구에 맞는 Fetch API를 제공합니다. 이전에 XMLHttpRequest 또는 다른 네트워킹 API를 사용해 봤다면 익숙할 것입니다. 자세한 정보는 Fetch 사용에 대한 MDN 가이드를 참조하십시오.

리퀘스트 만들기

임의의 URL에서 콘텐츠를 가져오려면 가져올 URL을 전달해야 합니다:

1
fetch('https://mywebsite.com/mydata.json')

또한 Fetch는 HTTP 요청을 사용자 정의 할 수 있는 두 번째 인수를 제공합니다. 추가 헤더를 지정하거나 POST 요청을 할 수 있습니다:

1
2
3
4
5
6
7
8
9
10
11
fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
})

전체 속성 목록을 보려면 Fetch Request 문서를 살펴보십시오.

응답 처리

위의 예는 요청(request)하는 방법을 보여줍니다. 대부분의 경우는 응답을 사용하여 무언가를 하고 싶을 것입니다.

네트워킹은 본질적으로 비동기식 작업입니다. Fetch 메소드는 비동기 방식으로 작동하는 코드를 작성하는 직관적인 Promise를 반환합니다:

1
2
3
4
5
6
7
8
9
10
function getMoviesFromApiAsync() {
return fetch('https://facebook.github.io/react-native/movies.json')
  .then((response) => response.json())
  .then((responseJson) => {
    return responseJson.movies;
  })
  .catch((error) => {
    console.error(error);
  });
}

React Native 앱에서는 ES2017 “async/await” 구문을 사용할 수도 있습니다:

1
2
3
4
5
6
7
8
9
async function getMoviesFromApi() {
try {
  let response = await fetch('https://facebook.github.io/react-native/movies.json');
  let responseJson = await response.json();
  return responseJson.movies;
} catch(error) {
  console.error(error);
}
}

fetch로 인해 발생할 수 있는 오류를 처리하는 것을 잊지 마십시오. 그렇지 않으면 자동으로 드랍될 것입니다.

기본적으로 iOS는 SSL을 사용하여 암호화되지 않은 요청을 차단합니다. 일반 텍스트 URL(http로 시작하는 URL)에서 가져와야 하는 경우 먼저 App Transport Security 예외를 추가해야 합니다. 어떤 도메인에 액세스해야 하는지 미리 아는 경우 해당 도메인에 대한 예외만 추가하는 것이 더 안전합니다. 런타임까지 도메인을 알 수 없으면 ATS를 완전히 비활성화 할 수 있습니다. 그러나 2017년 1월부터 Apple의 App Store 리뷰에는 ATS를 사용 중지하기 위한 합당한 근거가 필요합니다. 자세한 내용은 Apple 설명서를 참조하십시오.

다른 네트워킹 라이브러리 사용

XMLHttpRequest API는 React Native에 내장되어 있습니다. 즉, frisbeeaxios와 같은 써드파티 라이브러리를 사용할 수 있으며 원하는 경우 직접 XMLHttpRequest API를 사용할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var request = new XMLHttpRequest();
request.onreadystatechange = (e) => {
  if (request.readyState !== 4) {
    return;
  }

  if (request.status === 200) {
    console.log('success', request.responseText);
  } else {
    console.warn('error');
  }
};

request.open('GET', 'https://mywebsite.com/endpoint/');
request.send();

XMLHttpRequest의 보안 모델은 네이티브 앱에 CORS 개념이 없으므로 웹과 다릅니다.

WebSocket 지원

React Native는 또한 단일 TCP 연결을 통해 전이중(full-duplex) 통신 채널을 제공하는 프로토콜인 WebSockets도 지원합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var ws = new WebSocket('ws://host.com/path');

ws.onopen = () => {
  // connection opened

  ws.send('something'); // send a message
};

ws.onmessage = (e) => {
  // a message was received
  console.log(e.data);
};

ws.onerror = (e) => {
  // an error occurred
  console.log(e.message);
};

ws.onclose = (e) => {
  // connection closed
  console.log(e.code, e.reason);
};

이제 앱에서 모든 종류의 데이터를 표시할 수 있으며 곧 이 콘텐츠를 여러 화면에 나눠서 보여줘야 할 수도 있습니다. 이 화면 사이의 전환을 관리하려면 네비게이터에 대해 알아야 합니다.

Was this article helpful to you? Yes No

How can we help?