Quickstart

Application 루트에 NaverMaps Provider를 제공해야합니다. 사용하시는 프레임워크에 맞춰 <NavermapsProvider /> 를 감싸주세요.

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

function App() {
  return (
    <NavermapsProvider 
      ncpClientId='MY_NAVERMAPS_CLIENT_ID'
      // or finClientId, govClientId  
    >
      <TheRestOfYourApplication />
    </NavermapsProvider>
  )
}

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

function MyMap() {
  // instead of window.naver.maps
  const navermaps = useNavermaps()

  return (
    <NaverMap
      defaultCenter={new navermaps.LatLng(37.3595704, 127.105399)}
      defaultZoom={15}
    >
      <Marker
        defaultPosition={new navermaps.LatLng(37.3595704, 127.105399)}
      />
    </NaverMap>
  )
}

<MapDiv
  style={{
    width: '100%',
    height: '600px',
  }}
>
  <MyMap />
</MapDiv>