[React Native] React Native로 날씨앱 만들기 (7) - Location & Permissions

위도 경도를 가져오기 위해서는 geolocation 을 사용해야한다.

아쉽게도 geolocation은 그렇게 파워풀하지 못하다.

현재 위치을 가져오고 (getCurrentPosition)
위치를 지켜보고 (watchPosition)
watch 해제 (clearWatch)
Observing 을 멈추는 정도이다. (stopObserving)

하지만 상관없다. 지금 만드는 날씨 앱은 getCurrentPosition만 사용할 것이다.

getCurrentPosition은 브라우저에서 작동하는것(navigator,geolocation.getCurrentPosition)과 매우 비슷하다.

Expo로 가서 Location을 보면 더 많은 API를 사용할 수 있다. (ex. gps, 주소를 가지고 위도 경도 반환 등등)

docs.expo.io/versions/v41.0.0/sdk/location/

Location - Expo Documentation

하지만 이것들은 디폴트로 인스톨되지 않는다. 모든 라이브러리를 설치하면... 용량이 너무 커져서 비효율 적이다.

여튼 자신이 필요한 기능을 수동으로 install하면 되고 나는 expo install expo-location을 했다.

expo install expo-location

npm install expo-location 또는 yarn install expo-location 하는것과 같다. 차이점은 단지 Expo가 install 한다는 점이고 니코쌤은 Expo가 더 믿음이 간대..

 

 

설치를 완료했으니 이제 사용할 차례이다. import * as Location from "expo-location" 으로 임포트한다.

import * as Location from "expo-location"

 

갑자기 에러가 났지만 서버를 껏다키니 잘 된다.

이제 테스트를 위해 function Component였던 App.js를 class Component로 바꿔준다.

 

location을 보기위해 메서드를 찾아보니 다음과 같은게 있다.

getCurrentPositionAsync함수는 Async 함수이므로 await가 필요하다. 

getCurrentPositionAsync() 를 사용하려 했더니 위치 서비스를 사용할 수 있는 권한이 없다고 한다.

권한 요청을 위해서 Location.requestPermissionAsync() 를 사용하자.

 

하지만 세월이 흘렀는지 requestPermissionAsync() 메서드가 deprecated 되었다.

대신 requestForegroundPermissionsAsync() 를 쓰자.

try catch로 하는 이유는 permission을 주지 않을경우 Alert를 띄우기 위해서이다. 

참고로 Alert 도 react native에서 가져올것이다.

 

 

이제 위치 권한의 허용여부를 물어 본다. "앱 사용 중에만 허용"으로 해놓는다. 이제 다시 물어보지 않을 것이다.

 

es6를 사용해서 location 오브젝트 안에있는 coords 오브젝트를 가져오자.

 

위도와 경도가 콘솔에 잘 찍히는것을 확인했다. 

이제 state에 isLoading을 담아 true 일때 <Loading>을 리턴하도록 한다.

위도와 경도를 잘 가져 왔을때 setState로 isLoading을 false로 바꾼다.