[react] 사용자 위치를 리액트 네이틬브 지도에 표시하기

22 Dec 2023

react

React 네이티브 애플리케이션을 개발할 때 사용자의 현재 위치를 지도에 표시하는 기능은 매우 중요합니다. 이를 통해 사용자들이 주변 상점, 식당 또는 이벤트를 쉽게 찾을 수 있습니다. 이러한 기능을 구현하기 위해서는 사용자의 위치 정보를 가져와야 합니다.

위치 서비스 활성화

사용자의 위치 정보를 가져오기 위해서는 먼저 위치 서비스를 활성화해야 합니다. React 네이티브에서 사용자의 위치 정보를 가져오려면 react-native-geolocation-service와 같은 라이브러리를 사용할 수 있습니다. 이 라이브러리는 React 네이티브 애플리케이션에서 사용자의 위치 정보를 손쉽게 가져올 수 있도록 도와줍니다.

다음은 위치 서비스를 초기화하고 사용자의 현재 위치를 가져오는 코드입니다.

import Geolocation from 'react-native-geolocation-service';

class MapScreen extends React.Component {
  componentDidMount() {
    Geolocation.getCurrentPosition(
      position => {
        console.log('Current position: ', position.coords);
        // 지도에 현재 위치 표시하는 코드 추가
      },
      error => {
        console.log('Error getting the current position: ', error);
      },
      { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
    );
  }

  // 지도 렌더링 및 사용자 위치 표시 기능 추가
}

위 코드에서 Geolocation.getCurrentPosition 메서드의 첫 번째 콜백은 성공 시 위치 정보를 반환하고, 두 번째 콜백은 에러가 발생했을 때 호출됩니다.

지도에 사용자 위치 표시

React 네이티브에서 지도를 사용하려면 react-native-maps 라이브러리를 설치하고 사용해야 합니다. 이 라이브러리를 사용하면 Google 지도 또는 Apple 지도와 같은 지도 서비스를 React 네이티브 애플리케이션 내에서 사용할 수 있습니다.

다음은 react-native-maps를 사용하여 사용자의 현재 위치를 지도에 표시하는 코드입니다.

import MapView, { Marker } from 'react-native-maps';

// ...

render() {
  return (
    <MapView
      style={{ flex: 1 }}
      initialRegion={{
        latitude: this.state.latitude,
        longitude: this.state.longitude,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    >
      <Marker
        coordinate={{ latitude: this.state.latitude, longitude: this.state.longitude }}
        title={'현재 위치'}
        description={'당신이 여기 있어요!'}
      />
    </MapView>
  );
}

위 코드에서 MapView 컴포넌트를 사용하여 지도를 렌더링하고, Marker 컴포넌트를 사용하여 사용자의 현재 위치를 표시합니다.

이제 사용자의 위치 정보를 가져오고, React 네이티브 지도에 표시하는 방법을 알게 되었습니다.

참고 자료

위의 코드는 예시일 뿐이며, 실제 애플리케이션에서는 오류 처리와 추가적인 사용자 경험을 고려해야 합니다.