🎯
선언형 API
React props로 지도와 오버레이를 제어합니다. 상태가 바뀌면 지도도 자동으로 업데이트됩니다.
React Naver Maps KIT네이버 지도를 위한 React 바인딩
선언적 API, 자동 생명주기 관리, 완전한 TypeScript 지원
Skip to content
빠른 시작
설치
bash
pnpm add react-naver-maps-kitbash
npm install react-naver-maps-kitbash
yarn add react-naver-maps-kit첫 번째 지도
tsx
import { NaverMapProvider, NaverMap, Marker } from "react-naver-maps-kit";
function App() {
return (
<NaverMapProvider ncpKeyId="your-client-id">
<NaverMap
defaultCenter={{ lat: 37.5665, lng: 126.978 }}
defaultZoom={14}
style={{ width: "100%", height: "400px" }}
>
<Marker position={{ lat: 37.5665, lng: 126.978 }} />
</NaverMap>
</NaverMapProvider>
);
}커스텀 마커
tsx
<Marker position={{ lat: 37.5665, lng: 126.978 }}>
<div
style={{
padding: "8px 16px",
background: "#03C75A",
color: "white",
borderRadius: "20px",
fontWeight: "bold"
}}
>
서울시청
</div>
</Marker>컴포넌트
지도
| 컴포넌트 | 설명 |
|---|---|
NaverMapProvider | SDK 로딩 및 인증 관리 |
NaverMap | 지도 컨테이너 |
Panorama | 거리뷰 |
오버레이
| 컴포넌트 | 설명 |
|---|---|
Marker | 마커 (커스텀 콘텐츠 지원) |
MarkerClusterer | 마커 클러스터링 |
InfoWindow | 정보창 |
Polyline | 선 |
Polygon | 다각형 |
Circle | 원 |
Rectangle | 사각형 |
서브모듈
| 서브모듈 | 컴포넌트 |
|---|---|
panorama | Panorama, FlightSpot |
visualization | HeatMap, DotMap |
drawing | DrawingManager |
gl | GL 벡터 지도 |
Disclaimer: 이 라이브러리는 NAVER의 공식 라이브러리가 아닙니다.