Quickstart

사전 준비

네이버맵 API를 사용하려면 NCP(Naver Cloud Platform)에서 클라이언트 ID를 발급받아야 합니다. 공식 가이드를 참고하여 발급을 진행해주세요.

1. Naver Cloud Platform 콘솔에 로그인
2. AI·Application Service → Maps 에서 Application 등록
3. Web 서비스 환경 추가 후 허용 도메인 입력 (예: http://localhost:3000)
4. 등록 완료 후 인증 정보에서 Client ID 확인

설치

npm install react-naver-maps

Provider 설정

앱의 루트에 NavermapsProvider를 추가합니다. ncpKeyId에 발급받은 Client ID를 전달합니다.

import { NavermapsProvider } from 'react-naver-maps';

function App() {
  return (
    <NavermapsProvider ncpKeyId="YOUR_NCP_KEY_ID">
      <MyMap />
    </NavermapsProvider>
  );
}

지도 표시

import { Container as MapDiv, NaverMap } from 'react-naver-maps';

function MyMap() {
  return (
    <MapDiv style={{ width: '100%', height: '400px' }}>
      <NaverMap />
    </MapDiv>
  );
}

마커 추가

import {
  Container as MapDiv,
  NaverMap,
  Marker,
  useNavermaps,
} from 'react-naver-maps';

function MyMap() {
  const navermaps = useNavermaps();

  return (
    <MapDiv style={{ width: '100%', height: '400px' }}>
      <NaverMap
        defaultCenter={new navermaps.LatLng(37.3595704, 127.105399)}
        defaultZoom={15}
      >
        <Marker position={new navermaps.LatLng(37.3595704, 127.105399)} />
      </NaverMap>
    </MapDiv>
  );
}