React-Native Expo로 위치정보 받아오기

React-Native에서 위치에 관한 기능을 사용하기 위해 Expo를 사용해보자

https://docs.expo.dev/versions/latest/sdk/location/

위의 docs 주소 참고하자

expo-location 설치

npx expo install expo-location

우선 expo-location 을 설치해주자

Location import 시키기

import * as Location from 'expo-location';

핸드폰으로 부터 허가 받기

전체 코드는 아래와 같다.

useEffect(() => {
    LocationFunc();
}, []);

const LocationFunc = async () => {

    // 1. requestForegroundPermissionsAsync() 허가 받는 함수
  const { granted } = await Location.requestForegroundPermissionsAsync();
  if (!granted) {
    setOk(false);
  }
  // 2. 위치정보 가지고 오기
  const loaction = await Location.getCurrentPositionAsync({ accuracy: 5 });
  console.log(loaction);
  // {
  //   "coords":
  //       {
  //         "accuracy": 5,
  //         "altitude": 0,
  //         "altitudeAccuracy": -1,
  //         "heading": -1,
  //         "latitude": 37.785834,
  //         "longitude": -122.406417,
  //         "speed": -1
  //       },
  //     "timestamp": 1730456103939.91
  // }

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

  // 3. 위치정보를 가지고 구글 맵스를 이용하여 정보 다시 가지고 오기
  const location = await Location.reverseGeocodeAsync({ latitude, longitude }, { useGoogleMaps: false });
  console.log(location);

  // [
  //   {
  //     city: '샌프란시스코',
  //     country: '미 합중국',
  //     district: 'Union Square',
  //     isoCountryCode: 'US',
  //     name: 'Powell St',
  //     postalCode: '94108',
  //     region: 'CA',
  //     street: 'Ellis St',
  //     streetNumber: '2–16',
  //     subregion: '샌프란시스코',
  //     timezone: 'America/Los_Angeles',
  //   },
  // ];
};

1. requestForegroundPermissionsAsync() 허가 받는 함수

// requestForegroundPermissionsAsync() 허가 받는 함수
const premission = await Location.requestForegroundPermissionsAsync();
console.log(permission);

 // {"canAskAgain": true, "expires": "never", "granted": true, "status": "granted"}

해당 값의 결과 값으로는 canAskAgain, expires, granted , status, 4가지가 있다.

• canAskAgain : 사용자가 위치 권한 요청을 거부했더라도, 다시 위치 권한을 요청할 수 있다는 것을 의미한다. 결과값으로 boolean 타입을 갖는다.
• expires : 권한의 만료 시간을 보여준다. 결과 값으로 아래의 값들을 가지고 있다.
  • "never": 권한이 만료되지 않음을 나타낸다.
  • 숫자: 권한이 만료되는 Unix 타임스탬프
  • "locked": 권한이 잠겨 있어 만료되지 않음을 나타낸다.
• granted : 사용자가 앱에 위치 정보를 사용할 수 있는 권한을 부여했음 알 수 있다. 결과 값으로는 boolean 을 갖는다.
• status : 사용자가 권한을 부여했는지 여부를 확인할 수 있다. 아래와 같은 결과 값을 가지고 있다
  • granted: 사용자가 위치 정보 접근 권한을 승인
  • denied: 사용자가 위치 정보 접근 권한을 거부
  • undetermined: 아직 사용자가 권한 요청을 처리하지 않음

코드를 좀더 간단히 처리하게 하려면 다음과 같다

  // 1. requestForegroundPermissionsAsync() 허가 받는 함수
  const { granted } = await Location.requestForegroundPermissionsAsync();
  if (!granted) {
    setOk(false);
  }

이렇게 작성하면 바로 grant 여부를 확인할 수 있는 코드로 줄일 수 있다.

2. 위치정보가지고오기

// 2. 위치정보 가지고 오기
  const loaction = await Location.getCurrentPositionAsync({ accuracy: 5 });
  console.log(loaction);
  // {
  //   "coords":
  //       {
  //         "accuracy": 5,
  //         "altitude": 0,
  //         "altitudeAccuracy": -1,
  //         "heading": -1,
  //         "latitude": 37.785834,
  //         "longitude": -122.406417,
  //         "speed": -1
  //       },
  //     "timestamp": 1730456103939.91
  // }

권한이 허용됬다면 다음과 같이 위치 정보 latitude, longitude 를 가지고 올 수 있다.

이를 이용해 코드를 조금 더 줄인 다면 다음과 같이 줄일 수 있다.

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

3. 위치정보를 가지고 구글 맵스를 이용하여 정보 다시 가지고 오기

 // 3. 위치정보를 가지고 구글 맵스를 이용하여 정보 다시 가지고 오기
  const location = await Location.reverseGeocodeAsync({ latitude, longitude }, { useGoogleMaps: false });
  console.log(location);

  // [
  //   {
  //     city: '샌프란시스코',
  //     country: '미 합중국',
  //     district: 'Union Square',
  //     isoCountryCode: 'US',
  //     name: 'Powell St',
  //     postalCode: '94108',
  //     region: 'CA',
  //     street: 'Ellis St',
  //     streetNumber: '2–16',
  //     subregion: '샌프란시스코',
  //     timezone: 'America/Los_Angeles',
  //   },
  // ];

가지고 온 latitude, longitude 를 가지고 reverseGeocodeAsync 를 이용하여 해당 정보를 받아온다.