[React Native] 네이버 지도 연동

기존 웹뷰로 구현했던 지도 기능을 React Native로 마이그레이션하는 과정을 기록해본다.

설치 및 세팅

• @mj-studio/react-native-naver-map 라이브러리 사용

yarn add @mj-studio/react-native-naver-map

Android

네이버 지도 SDK 의존성 추가

• android/build.gradle

allprojects {
    repositories {
        maven {
            url "https://repository.map.naver.com/archive/maven"
        }
    }
}

네이버 SDK 키 추가

• AndroidManifest.xml

  <manifest>
    <application>
        <meta-data
            android:name="com.naver.maps.map.CLIENT_ID"
            android:value="YOUR_CLIENT_ID_HERE" />
    </application>
</manifest>

iOS

네이버 SDK 키 추가

• info.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>NMFClientId</key>
  <string>YOUR_CLIENT_ID_HERE</string>
<dict>
<plist>
***

---

기본 지도 화면 구현

import { NaverMapView } from '@mj-studio/react-native-naver-map';
import { View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import Header from '@/components/header';

// 초기 카메라 위치 설정
const INITIAL_CAMERA = {
  latitude: 37.5666102,  // 서울 중심부 위도
  longitude: 126.9783881,  // 서울 중심부 경도
  zoom: 12,  // 줌 레벨
};

const MountainMapScreen = () => {
  return (
    <SafeAreaView edges={['top']} className="flex-1">
      <Header centerTitle="등산 지도" />
      <View className="flex-1">
        <NaverMapView
          style={{ flex: 1 }}
          initialCamera={INITIAL_CAMERA}
        />
      </View>
    </SafeAreaView>
  );
};

export default MountainMapScreen;

---

2025.02 update

• react-native 버전 0.73.5에서 전체 서비스 마이그레이션 중이었으나 해당 라이브러리에서 react-native 버전 0.74(New Architecture 적용) 이상에서만 사용 가능한 기능들이 있어 중간에 RN 및 라이브러리 버전 업 진행.

  • react-native 0.73.5 ➡️ 0.76
  • @mj-studio/react-native-naver-map 1.5.10 ➡️ 2.2.0

참고

• https://navermaps.github.io/android-map-sdk/guide-ko/1.html