React(리액트) | 카카오 지도 API 연동하기

 

1. 카카오 개발자 사이트에 접속해서 애플리케이션 관련 설정을 한다.

애플리케이션을 추가한 후 앱 키에 Javascript 키를 복사해둔다.

 

플랫폼으로 이동해서 Web 사이트 도메인을 추가해준다.

 

2. Usage

public/index.html 파일의 head 태그안에 넣어준다.

<script
  type="text/javascript"
  src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY&libraries=services,clusterer"
></script>

 

install sdk

npm install react-kakao-maps-sdk

 

예제

import { Map, MapMarker } from "react-kakao-maps-sdk";

function(){
  return (
    <Map
      center={{ lat: 37.5662952, lng: 126.9779451 }}
      style={{ width: "100%", height: "400px" }}
    >
      <MapMarker position={{ lat: 37.5662952, lng: 126.9779451 }}>
      </MapMarker>
    </Map>
  )
}

 

3. 테스트

---

Reference

• https://react-kakao-maps-sdk.jaeseokim.dev/