2.7 Location

사용자의 위치정보를 가져오려고 한다.

우선 terminal에서

npx expo install expo-location

을 입력하여 expo-location을 설치해준다.

 

1. Geo Location으로 무엇을 할 수 있을까?

- 유저의 권한을 요청받아서(과거: requestPermissionsAsync -> 현재 : requestForegroundPermissionsAsync 또는 requestBackgroundPermissionsAsync. foreground를 대부분 쓰는 듯 하다. background는 유저를 추적할때 쓴다.) 유저의 마지막 위치를 받을 수 있다(getLastKnownPositionAsync).

- 현재 위치를 얻을 수 있다(getCurrentPositionAsync).

- 위치를 관찰 할 수 있다(watchPositionAsync).

- 주소를 받아서 위도와 경도로 변환할 수 있다(geocodeAsync).

- 위도와 경도를 도시와 구역으로 변환할 수 있다(reverseGeocodeAsync).

- 유저가 특정 지역을 벗어났을 때 알려줄 수 있다(startGeofencingAsync).

.

.

.

등 정말 많은 것들을 할 수 있다.

 

그럼 앱을 켰을 때, 유저의 권한을 요청받아서 현재위치를 받고, 그 위치를 위도와 경도로 변환 후 그곳의 도시와 구역으로 변환해주는 앱을 만들어 볼 것이다.

 

import * as Location from "expo-location";
import { StatusBar } from "expo-status-bar";
import React, { useEffect, useState } from "react";
import { View, Text, StyleSheet, ScrollView, Dimensions } from 'react-native';

const { width: SCREEN_WIDTH } = Dimensions.get("window");

console.log(SCREEN_WIDTH);

export default function App() {
  const [city, setCity] = useState("Loading...");
  const [location, setLocation] = useState(); //필요 없을 수도 있음.
  const [ok, setOk] = useState(true);
  const ask = async() => {
    //(1)
    const { granted } = await Location.requestForegroundPermissionsAsync();
    //(2)
    if(!granted) {
      setOk(false);
    }
    //(3)
    const {coords : {latitude, longitude}} = await Location.getCurrentPositionAsync({accuracy:5});
    //(4)
    const location = await Location.reverseGeocodeAsync(
      {latitude, longitude},
      {useGoogleMaps:false}
    );
    setCity(location[0].city); //(5)
  }
  useEffect(() => {
    ask();
  }, [])
  return (
    <View style={style.container}>
      <StatusBar style="light" />
      <View style={style.city}>
        <Text style={style.cityName}>{city}</Text>
      </View>
      <ScrollView
        pagingEnabled
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={style.weather}
        >
        <View style={style.day}>
          <Text style={style.temp}>27</Text>
          <Text style={style.description}>Sunny</Text>
        </View>
        <View style={style.day}>
          <Text style={style.temp}>27</Text>
          <Text style={style.description}>Sunny</Text>
        </View>
        <View style={style.day}>
          <Text style={style.temp}>27</Text>
          <Text style={style.description}>Sunny</Text>
        </View>
        <View style={style.day}>
          <Text style={style.temp}>27</Text>
          <Text style={style.description}>Sunny</Text>
        </View>
      </ScrollView>
    </View>
  );
}

const style = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "hotpink"
  },
  city: {
    flex: 1,
    justifyContent: "center", //세로에서 중앙
    alignItems:"center" //가로에서 중앙
  },
  cityName: {
    fontSize: 50,
    fontWeight: "500"
  },
  weather: {

  },
  day: {
    width: SCREEN_WIDTH,
    alignItems: "center",
  },
  temp: {
    marginTop: 50,
    fontSize: 178,
  },
  description: {
    marginTop: -30,
    fontSize: 60,
  },
});

 

(1) 허가를 받았는지 알고싶으므로,

requestForegroundPermissionAsync 중에서 granted 정보를 받아온다. (const {granted} = ~~~)

const { granted } = await Location.requestForegroundPermissionsAsync();

 

(2) 허가를 받았는지 확인이 되면 위치를 요청할 수 있게 한다.
만약 허가를 받지 못했다면, state를 변경하고 UI도 변경할 계획. (UI를 슬픈얼굴로 변경한다던지..)

if(!granted) {
      setOk(false);
    }

 

(3) getCurrentPositionAsync() 메소드를 통해서 현재 위치를 받아온다.
얼마나 정확하게 받아올 것인지 1단계부터 6단계까지 정할 수 있다.
getCurrentPositionAsync({accuracy:5}); -> 우리는 5단계로 설정.
getCurrentPositionAsync() 메소드로 "coords" : {"latitude":~~, "longtitude":~~} 위도경도 값을 가져온다.

const {coords : {latitude, longitude}} = await Location.getCurrentPositionAsync({accuracy:5});

 

(4) 이제 위도 경도 값을 가지고 reverse geocoding을 할 수 있다.

const location = await Location.reverseGeocodeAsync(
      {latitude, longitude},
      {useGoogleMaps:false}
    );

 

(5) 이곳이 내가 위치한 도시명이다.

setCity(location[0].city);