지도 기본 예제

가장 기본적인 지도 표시 예제입니다.

코드 보기

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

export default function BasicMap() {
  return (
    <NavermapsProvider ncpKeyId="aluya4ff04">
      <MapDiv style={{ width: '100%', height: '400px' }}>
        <NaverMap />
      </MapDiv>
    </NavermapsProvider>
  );
}

설명

NavermapsProvider로 인증 키를 설정하고, Container로 지도 영역을 잡은 뒤 NaverMap을 렌더링합니다.

Container는 position: relative인 div이며, 내부에 Suspense를 포함하고 있어 스크립트 로드를 자동으로 처리합니다.