[React Native] 6장 플랫폼 API

6장 플랫폼 API

플랫폼 api란 스마트폰의 카메라롤, 위치, 영속되는 저장소 등을 접근할 수 있게 해주는 것이며, 리액트 네이티브에는 재당된 모듈을 통해 사용하기 편리한 비동기 JavaScript 인터페이스로 제공된다.

일부 API는 직접 모듈을 만들어서 써야 할 수도 있다.

6.1 지리적 위치 정보 이용하기

특별히 import할 모듈 없이 navigator를 사용하면 된다. getCurrentPosition은 success callback, error callback, goeOptions을 인자로 받는다.

//예제 코드
navigator.geolocation.getCurrentPosition(async position => {
        const { longitude, latitude } = position.coords;
        const res = await fetch(`${api}/location?lon=${longitude}&lat=${atitude}`);
        const result = await res.json();

        this.setState({
          storeList: result
        });
      },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
    );

success callback으로 받는 position객체는 아래와 같이 들어온다. 실제 위경도 정보를 받으려면 실물 폰으로 해야한다. simulator로는 제대로 된 값이 들어오지 않았다.

simulator에서 가상으로 위경도를 바꾸려면 메뉴 -> Debug -> Location -> Custom Location 메뉴에서 다른 좌표를 입력하여 변경할 수 있다.

{
  "coords": {
    "accuracy": 65,
    "altitude": 51.0984992980957,
    "altitudeAccuracy": 10,
    "heading": -1,
    "latitude": 37.50606253674235,
    "longitude": 127.0539114717741,
    "speed": -1,
  },
  "timestamp": 1563422309308.258,
}

책에 따르면

앱 설정파일에 이 앱이 위치 정보에 접근할 필요가 있다는 것을 명시해야만 위치 정보 접근을 요청할 수 있다. iOS의 경우 NSLocationWhenInUseUsageDescription 항목을 리액트 네이티브 앱 생성 시 기본으로 포함되는 Info.plist 파일에 추가해야 한다. 안드로이드의 경우 AndroidManifest.xml 파일에 특정 코드를 추가해야 한다.

라고 하는데, expo로 해서 그런지 아무 설정을 안 해도 정보 접근 alert상자가 잘 떴다. 어쩌면 지금은 개발모드라서 될 수도 있고, 실제 배포 전에는 추가해야할 수도 있다. 알아봐야한다.

6.1.4 사용자 위치 지켜보기

지속적으로 사용자의 위치를 추적하거나 최신 위치 정보를 유지하고자 할 때 사용한다고 한다. 폰 들고 움직일 수가 없어 테스트해보지 못했다 ㅎㅎ 타다, 카택 등의 앱을 클론할 때 사용해볼 코드이다.

this.watchID = navigator.geolocation.watchPosition(position => {
  this.setState({ position });
});

컴포넌트가 unmount 될 때 clear 시켜줘야 한다.

componentWillUnmount() {
  navigator.geolocation.clearWatch(this.watchID);
}

6.2 사진과 카메라 접근

책에 따르면, eject를 해야 카메라를 사용할 수 있다던데, expo(33.0.0)로 했을 때 문제 없이 잘 작동했다.

//예제코드
 CameraRoll.getPhotos({ first: 1, assetType: 'Photos', groupTypes: 'All' })
      .then(data => {
        setPhotoSource({uri: data.edges[0].node.image.uri})
      }, error => {
        console.log('error', error)
      })

대신 assetType, groupTypes를 세팅하지 않으면 에러가 떠서 값을 추가로 주었다. getPhotos의 parameter는 공식문서에 더 자세히 나와있으니 여기서 보는게 낫겠다.

6.3 AsyncStore

React Native에서 제공하는 AsyncStorage는 key-value 형태로 데이터를 저장하며 이는 앱 내에서 어디서나 접근 가능하다. 웹의 LocalStorage와 비슷하다.

AsyncStorage에 저장할 때 사용하는 키는 모든 문자열을 포함할 수 있다. @앱이름:키 형태로 지정하는 것이 일반적이다.

const STORAGE_KEY = '@SmartWeather:zip';

AsyncStorage 모듈의 getItem, setItem 함수는 promise객체를 리턴한다. 다음과 같이 사용한다.

AsyncStorage.getItem(STORAGE_KEY)
  .then(value => {
    if (value) {
      this._getForecastForZip(value);
    }
  })
  .catch(err => console.log(err.messgae)
  .done();