## Usage
이 라이브러리를 사용하기 위해서는 **필수적**으로 Kakao 지도 API를 불러와야 합니다.
[Kakao 지도 Javscript API](https://apis.map.kakao.com/web/guide/)
### HTML Script Tag를 이용하여 Kakao 지도 API 불러오기
```html
```
### [Hook을 이용하여 Kakao 지도 API 불러오기](https://react-kakao-maps-sdk.jaeseokim.dev/docs/setup/withHook)
```tsx
const Component = () => {
const [ loading, error ] = useKakaoLoader({
appkey: "...", // 발급 받은 APPKEY
...options // 추가 옵션
})
return <>
...
<>
}
```
## TypeScript
타입스크립트 사용자를 위해 [kakao.maps.d.ts](https://github.com/JaeSeoKim/kakao.maps.d.ts) 패키지를 제공합니다.
`tsconfig.json`의 `compilerOptions.types` 속성에 `kakao.maps.d.ts` 패키지를 추가하시면 됩니다.
```js
{
...,
"compilerOptions": {
...,
"types": [
...,
"kakao.maps.d.ts"
]
}
}
```
## Install
```bash
npm install react-kakao-maps-sdk
# or
yarn add react-kakao-maps-sdk
# or
pnpm add react-kakao-maps-sdk
```
## Simple Usage
### 맵위에 마커와 인포윈도우 올리기
```jsx live
function(){
return (
)
}
```
### 맵위에 커스텀오버레이 올리기
```jsx live
function(){
return (
)
}
```
### 맵위에 마커 클러스터 올리기
> **※ 참고**: 해당 기능을 사용하기 위해서는 사용자는 반드시 `clusterer` library를 불러와야 합니다.
```jsx live
function(){
return (
)
}
```
## Documentation
- [Tutorial](https://react-kakao-maps-sdk.jaeseokim.dev/docs/intro)
- [Sample](https://react-kakao-maps-sdk.jaeseokim.dev/docs/sample)
- [API](https://react-kakao-maps-sdk.jaeseokim.dev/docs/api)
## Working list
- Map
- Marker
- InfoWindow
- CustomOverlay
- MarkerClusterer
- AbstractOverlay
- Shape
- Circle, Polyline, Polygon, Rectangle, Ellipse
- DrawingBox
- Roadview
- Marker
- InfoWindow
- CustomOverlay
- StaticMap
## Contribute
ISSUE와 PR 대환영 입니다..!!
