[React Native] 날씨 어플 만들기 - 위치 정보 가져오기

1. 권한 요청하기

expo install expo-location

콘솔창에 명령어를 입력해준다.

그 동안 Location 으로 무엇을 할 수 있는지를 살펴보면, 우리는 당연히 권한을 요청해야 할 것이고(AskPermissionsAsync() )

이런식으로 적어주면 된다.

우리가 지금부터 작성할 코드는 React Native 와는 상관이 없다. JavaScript 코드를 사용할 것이다. (state, useEffect, useState) 기본적으로 그런 것들이다.

된다!!!

permission 을 출력해보면 다음과 같이 Object 임과 그 안의 내용물을 확인해 볼 수 있다.

permission 이 Object 이고 그안에 granted 키 값의 value 에 따라 true 이면 위치 정보를 API 에 요청할 것이고 그렇지 않다면 UI를 변경해 주든 할터이니 이를 구현해 보자

Object 에서 해당 하는 key 값의 value를 가져오는 건 중괄호 이다.

{granted}

다음과 같이 반환하는 Object 에서 해당하는 property의 값을 바로 받아 올 수 있다.

권한 요청을 거절했을 경우에 대비해

setOk(false) 로 해주자. 그래서 이러한 경우 UI 를 슬픈 표정으로 바꾸어 준다던지 할 수 있다.

2. 위치 정보 획득하기

getCurrentPositionAsync() 라는 친구가 있다.

인자로 옵션을 받는다. 옵션정보는 클릭하면 확인할 수 있는데 accuracy 는 1~6까지 숫자 값으로 원하는 정확도를 설정할 수 있다.

Location.getCurrentPositionAsync() 를 해주면!

이런 결과를 받아오늘 걸 확인할 수 있다!!
너무 멋지다!

Object 안의 coords 라는 또 다른 Object 안에 우리가 원하는 latitude와 longitude가 있으니깐

const {coords : {latitude, longitude}} = await ~~

이제 latitude 와 longitude 를 가지고 reverseGeocode 를 할 수 있다.

감동적이다!!

우리는 유저의 지리 좌표를 가지고 도시명을 구했다. 이제 도시명만을 가져와 출력해보자.

location 으로 출력된 자료형태를 보면 Array 형태가 안에 Object 를 포함한 형태임을 알 수 있다. 각각 배열(Array)과 객체(Object)를 참조할 수 있게 하자.

location[0].region

이제 이걸 활용해서 새로운 state 를 만들어준 다음에 거기에 담아주고 이를 화면에 출력해 주자

UI를
return 하는
Text 태그 사이에 {city} 를 해주면!

현재 권한을 요청하기 위해 생성했던 ask() 에서 권한 요청 외에도 위치정보 가져오기 & 위치 정보로 도시정보 가져오기 와 같이
많은 작업들이 수행되고 있기 때문에 함수를 작업 단위로 분해 시켜야 된다.