React Native에서 현재 위치 정보 가져오기

2019-12-08

react-native-geolocation-service 라이브러리를 이용하여 React Native에서 현재 위치 정보를 가져오는 방법에 대해서 알아봅시다.

개요

이번 블로그 포스트에서는 React Native에서 현재 위치 정보를 가져오는 방법에 대해서 알아봅니다. 위치 정보를 가져오기 위해 사용할 라이브러리는 react-native-geolocation-service이며 아래에 링크를 통해 자세한 내용을 확인할 수 있습니다.

블로그를 작성하면서 만든 예제 소스코드가 있습니다. 소스코드를 확인하고 싶은 분들은 아래에 링크를 참고하시기 바랍니다.

예제 소스코드는 아래에 내용이 적용되어 있으니, 궁금하신 분들은 아래에 내용도 참고하시기 바랍니다.

react-native-geolocation-service 설치

아래에 명령어를 사용하여 react-native-geolocation-service를 설치합니다.

npm install --save react-native-geolocation-service

라이브러리 연결

설치한 라이브러리를 React Native 프로젝트에 연결할 필요가 있습니다.

0.60 이상

ios/[project name]/Podfile을 열고 아래에 내용을 추가합니다.

...
pod 'react-native-geolocation', path: '../node_modules/@react-native-community/geolocation'
...

위에 내용을 추가하였다면, 아래에 명령어로 react-native-geolocation-service를 React Native 프로젝트에 연결합니다.

cd ios
pod install
cd ..

0.59 이하

React Native 버전이 0.59 이하이신 분들은 공식 사이트를 참고하여 연결하시기 바랍니다.

안드로이드 권한 설정

안드로이드에서 위치 정보를 사용하기 위해서 android/app/src/main/AndroidManifest.xml 파일을 열고 아래와 같이 수정합니다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.reactnativegeolocationserviceexample">

    ...
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    ...

    <application

사용법

react-native-geolocation 라이브러리를 사용하여 아래와 같이 위치 정보를 가져올 수 있습니다.

현재 위치 가져오기

현재 위치를 가져오기 위해서는 아래에 코드를 사용합니다.

Geolocation.getCurrentPosition(
    (position) => {
        console.log(position);
    },
    (error) => {
        // See error code charts below.
        console.log(error.code, error.message);
    },
    { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
);

현재 위치를 화면에 표시하는 예제는 아래와 같습니다.

import React, {useState, useEffect} from 'react';
import Styled from 'styled-components/native';
import Geolocation from 'react-native-geolocation-service';

const Container = Styled.View`
    flex: 1;
    justify-content: center;
    align-items: center;
`;

const Label = Styled.Text`
    font-size: 24px;
`;

interface ILocation {
  latitude: number;
  longitude: number;
}

const CurrentPosition = () => {
  const [location, setLocation] = useState<ILocation | undefined>(undefined);

  useEffect(() => {
    Geolocation.getCurrentPosition(
      position => {
        const {latitude, longitude} = position.coords;
        setLocation({
          latitude,
          longitude,
        });
      },
      error => {
        console.log(error.code, error.message);
      },
      {enableHighAccuracy: true, timeout: 15000, maximumAge: 10000},
    );
  }, []);

  return (
    <Container>
      {location ? (
        <>
          <Label>Latitude: {location.latitude}</Label>
          <Label>Latitude: {location.longitude}</Label>
        </>
      ) : (
        <Label>Loading...</Label>
      )}
    </Container>
  );
};

export default CurrentPosition;

위에 소스코드의 결과 화면은 다음과 같습니다.

react-native-geolocation-service 사용자 현재 위치

사용자 위치 정보 추적

react-native-geolocation-service를 사용하면 사용자의 현재 위치뿐만 아니라, 사용자의 위치 정보를 추적할 수 있습니다.

사용자 위치 추적에 사용되는 코드는 아래와 같습니다.

_watchId = Geolocation.watchPosition(
  position => {
    const {latitude, longitude} = position.coords;
    setLocation({latitude, longitude});
  },
  error => {
    console.log(error);
  },
  {
    enableHighAccuracy: true,
    distanceFilter: 0,
    interval: 5000,
    fastestInterval: 2000,
  },
);

사용자 위치 추적을 종료할 시에는 아래와 같은 코드를 사용합니다.

if (_watchId !== null) {
  Geolocation.clearWatch(_watchId);
}

사용자 위치 추적에 관한 전체 소스는 다음과 같습니다.

import React, {useState, useEffect} from 'react';
import Styled from 'styled-components/native';
import Geolocation from 'react-native-geolocation-service';

const Container = Styled.View`
    flex: 1;
    justify-content: center;
    align-items: center;
`;

const Label = Styled.Text`
    font-size: 24px;
`;

interface ILocation {
  latitude: number;
  longitude: number;
}

const WatchLocation = () => {
  const [location, setLocation] = useState<ILocation | undefined>(undefined);
  let _watchId: number;

  useEffect(() => {
    _watchId = Geolocation.watchPosition(
      position => {
        const {latitude, longitude} = position.coords;
        setLocation({latitude, longitude});
      },
      error => {
        console.log(error);
      },
      {
        enableHighAccuracy: true,
        distanceFilter: 0,
        interval: 5000,
        fastestInterval: 2000,
      },
    );

    return () => {
      if (_watchId !== null) {
        Geolocation.clearWatch(_watchId);
      }
    };
  }, []);

  return (
    <Container>
      {location ? (
        <>
          <Label>Latitude: {location.latitude}</Label>
          <Label>Latitude: {location.longitude}</Label>
        </>
      ) : (
        <Label>Loading...</Label>
      )}
    </Container>
  );
};

export default WatchLocation;

시뮬레이터에서 사용자 위치 정보를 추적하기 위해서는 다음 그림과 같이 Debug > Location 메뉴에서 City Run, City Bicycle Ride, Freeway Drive 중 하나의 메뉴를 선택하면 위치 정보가 갱신 되는 것을 확인할 수 있습니다.

react-native-geolocation-service 사용자 위치 추적

완료

이것으로 react-native-geolocation-service를 사용하여 사용자의 위치 정보를 가져오는 방법에 대해서 알아보았습니다. 또한 watchPosition을 사용하여 사용자의 위치 정보를 추적하는 방법에 대해서도 알아보았습니다.

책 홍보

저도 블로그를 시작한지 1년만에...책을 다 써봅니다...인생에서 이런 날도 오는군요...타국에서 책 출판도 할 수 있고, 참 좋은 세상입니다.

이번에 쓴 책은 스무디 한 잔 마시며 끝내는 React Native입니다. 다양한 예제를 통해 리액트 네이티브를 공부할 수 있도록 구성해 보았습니다. 또한 설치부터 배포까지 실전에서도 사용할 수 있는 내용들을 담고 있습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.
스무디 한 잔 마시며 끝내는 React Native React Native로 실전 스마트폰 앱 만들기
Buy me a coffeeBuy me a coffee
Posts