Container

Container는 지도가 렌더링될 DOM 컨테이너입니다. NaverMap의 부모로 사용합니다. 내부에 Suspense를 포함하고 있어, 네이버맵 스크립트 로딩을 자동으로 처리합니다.

사용법

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

<MapDiv style={{ width: '100%', height: '400px' }}>
  <NaverMap />
</MapDiv>;

render function

children으로 render function을 전달하면 navermaps 네임스페이스를 인자로 받을 수 있습니다. 별도 컴포넌트를 분리하지 않아도 됩니다.

<Container style={{ width: '100%', height: '400px' }}>
  {(navermaps) => (
    <NaverMap
      defaultCenter={new navermaps.LatLng(37.5666, 126.9784)}
      defaultZoom={15}
    />
  )}
</Container>

로딩 fallback

fallback prop으로 스크립트 로드 중 표시할 UI를 지정합니다.

<Container
  style={{ width: '100%', height: '400px' }}
  fallback={<div>지도를 불러오는 중...</div>}
>
  <NaverMap />
</Container>

SSR

SSR에서는 외부 div(높이 포함)만 렌더링되고, 지도는 클라이언트 hydration 후 표시됩니다. useNavermaps()는 반드시 Container 안에서 호출해야 합니다.

Props