[React Native] 네이버 지도 SDK 설치 및 구현

기존 웹뷰로 구현했던 지도 기능을 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;

---

✨ Before & After

• Javascript 브릿지를 거치던 웹뷰보다 지도 조작 시 지연 시간이 확실히 줄어들었다..!
• 직접적인 터치 이벤트 처리로 UX도 더 부드러운 느낌
• 웹뷰에서 GPS 정확도나 백그라운드 위치 추적에 제약이 있어 구현하지 않았던 위치 서비스를 추가했다. 유저들이 산 정상에서 인증하는 경우가 많은데 좀 더 편리하게 이용할 수 있지 않 을 까 .. 기왕 네이티브로 왔으니 앞으로 위치를 활용한 다양한 기능도 붙여볼 수 있을 것 같다

---

🌿 Update

2025.02 : RN 및 라이브러리 버전 업

• 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