[React Native] 디바이스의 현재 위치 가져오기

 

 

React Native 의 개발환경을 세팅하고 Expo 에 대한 설명은 아래를 참고!

[React Native] Hello World! 개발환경 세팅하기

[React Native] Hello World! 개발환경 세팅하기

 

 

Expo 의 Location 사용하기

Expo 의 Docs 를 가보면 알 수 있듯이 Expo 는 꽤나 다양한 라이브러리를 제공한다.

오늘은 그 중에서도 Location 을 통해 디바이스의 위치 정보를 가져올 수 있는 권한을 물어보고, 현재 디바이스의 위치 정보를 longitude, latitude 로 가져오는 것을 해보려고 한다. 

우선 Location 라이브러리의 구체적인 Spec 은 요기 : https://docs.expo.io/versions/latest/sdk/location/

 

우선 Expo 의 라이브러리는 프로젝트에 필요한 것들만 선택적으로 설치하는 구조로 되어있다. 따라서 Location 라이브러리를 사용하기 위해서는 해당 라이브러리를 프로젝트에 설치해야 한다. 아래 명령어로 빠르게 설치.

expo install expo-location

 

설치가 끝났으면 프로젝트에 import.

import * as Location from 'expo-location';

 

 

위치정보 권한 취득하기 : Location.requestPermissionAsync()

Location 라이브러리의 위치정보 권한을 취득하는 Method 를 살펴보자. 

https://docs.expo.io/versions/latest/sdk/location/#locationrequestpermissionsasync

 

이름에서 볼 수 있듯이 비동기 함수니까 우선은 Async 니까 Await 가 필요하겠고.. 

(Async 와 Await 에 대한 자세한 설명은 아래 Reference 를 참고.)

Spec 을 보니 PermissionResponse 라는 Promise 를 Return 하는 것을 알 수 있다. 

export default class extends React.Component {
  getLocation = async () => {
    try {
      const response = await Location.requestPermissionsAsync();
      console.log(response);

    } catch (error) {
    }
  }
  componentDidMount() {
    this.getLocation();
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Hello World!</Text>
      </View>
    );
  }
}

만약에 디바이스 유저가 권한을 불허 (Reject) 했을 때는 Alert 를 띄워주기 위해, catch (error) 안에 Alert 를 추가하였다. 

Alert 를 띄우기 위해 React Native 의 Alert 를 import.

import { Alert } from "react-native";

그리고 Catch 문에 어떤 Alert 를 띄울지 추가. 나는 "Can't find you. Please try Again!" 을 넣었다.

try {
      const response = await Location.requestPermissionsAsync();
      console.log(response);
      const location = await Location.getCurrentPositionAsync();
      console.log(location);

    } catch (error) {
      Alert.alert("Can't find you.", "Please Try Again!")
    }

성공적으로 호출이 되면 아래와 같이 시뮬레이터에서 권한을 줄 것인지 물어보게 된다. 

나같은 경우는 이전에 Expo 의 다른 앱에서 취득을 해둔 상태라서 아래와 같이 뜨는데, 처음 물어보게 되면 아이폰에서 위치 정보 권한을 물어보는 것 (항상/이 앱을 사용할 때만/불허)처럼 뜬다.

 

만약에 권한을 불허하게 되면 아래와 같이 내가 설정한 Alert 가 뜬다.

 

 

 

위치 정보 가져오기 : Location.getCurrentPositionAsync(options)

마찬가지로 위치정보를 가져오는 Method 를 살펴보자.

https://docs.expo.io/versions/latest/sdk/location/#locationgetcurrentpositionasyncoptions

 

마찬가지로 비동기 함수니까 권한 취득과 유사한 구조로 호출해야 겠고,

Spec 을 보면 Argument 에 Option 값이 있는 것을 볼 수 있다.

Option 값으로는 Accuracy 가 있는데 (정확도를 설정하는 옵션 값) 여기에서는 기본적인 longitude 와 latitude 값만을 가져오는 것이 목표이기 때문에 우선 Default 로 호출해보았다.

getLocation 함수 안에 아래와 같은 코드로 호출하면 완성.

const location = await Location.getCurrentPositionAsync();
console.log(location);

성공적으로 호출이 됐을 경우 아래와 같이 위치 정보가 로그로 찍히는 것을 확인할 수 있다.

longitude 가 -122.406417, latitude 가 37.785834

 

 

 

전체 App.js 코드

1) "Hello World!" 기본코드에

2) 위치 정보 권한 취득하고,

3) 위치 정보 가져오기

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Alert } from "react-native";
import * as Location from 'expo-location';

export default class extends React.Component {
  getLocation = async () => {
    try {
      const response = await Location.requestPermissionsAsync();
      console.log(response);
      const location = await Location.getCurrentPositionAsync();
      console.log(location);

    } catch (error) {
      Alert.alert("Can't find you.", "Please Try Again!")
    }
  }
  componentDidMount() {
    this.getLocation();
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Hello World!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'blue',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 30,
    color: 'white'
  }
});

 

 

Refs.

• React Native 의 개발환경 설정 : [React Native] Hello World! 개발환경 세팅하기

• Expo Location Specification : https://docs.expo.io/versions/latest/sdk/location/

• Javascript 의 Import 와 Export : https://medium.com/@enro2414_40667/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-export-import%EC%A0%95%EB%A6%AC-137ac9e327d9

• Javascript Async 와 Await 비동기 함수 처리 : https://joshua1988.github.io/web-development/javascript/js-async-await/#async--await%EB%8A%94-%EB%AD%94%EA%B0%80%EC%9A%94

• Javascript 의 비동기 함수와 Promise 객체 : https://joshua1988.github.io/web-development/javascript/promise-for-beginners/