| 이 방식의 단점은 document.write 를 사용하고 있고, 크로스 사이트 문제로 인해 sdk 스크립트 사용이 불안정하다는 점이 있다. |
Hello from react-kakao-maps-sdk docs | react-kakao-maps-sdk docs
Description will go into a meta tag in <head />
react-kakao-maps-sdk.jaeseokim.dev
ReactKakaoMapSDK 란?
kakao map 을 리액트 환경에 맞게 컴포넌트화 시킨 것이라 보면 된다. 국내 개발자가 만든 것으로 보이고, 카카오 맵의 경우 타입 정의를 지원하지 않는데, 이에 대한 타입 정의를 만들어서 제공하고 있는 점이 눈에 띈다. 단, 아직 미완성이라서 모든 타입을 다 지원해주는 것은 아니다.
유지보수는 꾸준히 이루어지고 있는 것 같지만, 클라이언트 단에서 사용하는 경우 크로스 사이트 문제가 발생하는데, 이로 인해 언제든지 브라우저에 의해 차단될 가능성이 높아서 매우 불안정하다는 느낌을 지울 수 없다. 하지만, 간단하게 리액트 앱을 만들어서 적용해보기에는 나쁘지 않아 보인다. 다만 실제 배포 시에 사용하는 것은 최대한 피해야 하지 않을까 싶다. 물론 나만 이런 문제를 경험하는 것일 수도 있지만, 나의 경험상 그렇다.
1. 카카오 지도 api 불러오기
| 다음 스크립트를 리액트의 public > index.html 의 <head> 하단에 붙여 넣기 |
<script
type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다.&libraries=services,clusterer"
></script>
| 참고) 타입스크립트를 사용하는 사용자의 경우 kakao.maps.d.ts 를 제공하므로 다음의 추가 절차를 따른다. |
GitHub - JaeSeoKim/kakao.maps.d.ts: TypeScript Definitions for kakao.maps.* (Kakao(구 Daum) 지도 Web API)
TypeScript Definitions for kakao.maps.* (Kakao(구 Daum) 지도 Web API) - GitHub - JaeSeoKim/kakao.maps.d.ts: TypeScript Definitions for kakao.maps.* (Kakao(구 Daum) 지도 Web API)
github.com
타입 정의 설치하기
# npm
$ npm install kakao.maps.d.ts --save-dev
# yarn
$ yarn add kakao.maps.d.ts --devtsconfig.json 에서 다음 코드 추가
| types 속성에 앞서 설치했던 타입정의 파일을 추가한다. |
{
"compilerOptions": {
... ,
"types": [
"kakao.maps.d.ts"
],
...,
},
...,
}
2. 컴포넌트 추가하기
아래는 위도와 경도 데이터를 props 로 객체분할하여 받아온 뒤 해당 위치로 카카오 맵을 표시하게 하는 코드 예시이다.
아래와 같이 Map 과 MapMarker 를 import 해온 뒤 jsx 문법에 따라 아래 코드를 작성해주면 된다.
import React, { useEffect } from "react";
import styles from "./KaMap.module.css";
import { Map,MapMarker } from "react-kakao-maps-sdk";
interface KaMapType{
la?:string,
lo?:string
}
function KaMap({la,lo}:KaMapType) {
console.log(la,lo)
return (
<Map
className={styles.KaMap}
center={{ lat: Number(la), lng: Number(lo) }}
style={{ width: "500px", height: "500px" }}
>
<MapMarker position={{ lat: Number(la), lng: Number(lo) }}>
<div style={{ color: "#000" }}>Hello World!</div>
</MapMarker>
</Map>
);
}
export default KaMap;
그럼 다음과 같이 지도가 뜨는 것을 볼 수 있다. 단, 10번 중에 5번은 크로스 사이트 오류가 뜨면서 제대로 렌더링 되지 않는다. 직접 해결이 가능하면 상관은 없겠지만, 암튼 현재 내가 경험하기로는 실제 배포 용도로는 적합하지 않고, 개인적인 흥미에서 사용해보는 것이 좋아 보인다.
'리액트' 카테고리의 다른 글
| [리액트] 개인 코드 정리(리덕스 툴킷 타입스크립트 설정) (0) | 2023.07.26 |
|---|---|
| [React] 리액트에서 카카오 맵 불러오기 (with kakao map) (0) | 2023.07.21 |
| [react hooks] 3. useContext 에 대한 정리 (0) | 2023.06.06 |
| [react-router-dom] useSearchParams () 에 대한 정리 (0) | 2023.06.05 |
| [react hooks] 2. useMemo() (0) | 2023.05.15 |
