[react] 리액트 네이티브에서 지도 위에 마커 추가하기

[react] 리액트 네이티브에서 지도 위에 마커 추가하기

22 Dec 2023

react

목차

필요한 패키지 설치
지도 컴포넌트 추가
마커 추가

1. 필요한 패키지 설치

먼저, 리액트 네이티브 지도를 사용하기 위해 ‘react-native-maps’ 패키지를 설치해야 합니다.

npm install react-native-maps

2. 지도 컴포넌트 추가

리액트 네이티브 지도 컴포넌트를 import하고, 해당 지도 컴포넌트를 렌더링합니다.

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

// ... 

<MapView
  style={{ flex: 1 }}
  initialRegion={{
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  }}
>
  {/* 마커 추가 */}
  <Marker
    coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
    title={'마커 제목'}
    description={'마커 설명'}
  />
</MapView>

3. 마커 추가

<Marker> 컴포넌트를 사용하여 원하는 위치에 마커를 추가할 수 있습니다. coordinate prop을 통해 위치를 정의하고, title과 description prop을 이용하여 마커에 정보를 추가할 수 있습니다.

이제 위의 단계를 따라하면 리액트 네이티브 앱에서 지도 위에 마커를 추가할 수 있을 것입니다.