reactkakaoMapSDK 사용해보기 클릭한 위치에 마커 표시하기

react로 kakaoMap을 사용해 낚시정보 web(예: 제주도 애월읍에서 참돔을 잡았다를 지도에 표시)을 만들어보려고 하는데

눈에 띄는 SDK가 하나 있었다 한번 사용해보자

 

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

듀토리얼을 보면 설치는 이렇게 나와있다

npm install react-kakao-maps-sdk
# or
yarn add react-kakao-maps-sdk

난 npm을 쓰니까 npm 으로 설치를 해보자

뭔데 왜이러는데

내 react는 별다른 코드도 없고 설치한 sdk도 없어서 거의 새거나 다름없는데 이상태는 뭔가 위험해보인다

나중에 골치아파 질거 같으니 하라는대로 npm audit를 때려주자

 

더욱 위험한놈이 되어 돌아왔다

이게 아닌데....

npm audit fix로 다시해보자

캡처는 못했지만 아까 6개로 다시 돌아 왔다..

일단 그냥 이대로 가보자....

 

다시 index.html파일을 수정해주자

이전에 넣었던

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>

이부분을

<script
  type="text/javascript"
  src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다.&libraries=services,clusterer"
></script>

이걸로 수정해 주면 된다

개인적인 APP KEY로 바꿔주는것 잊지말자

 

자이제 SDK 페이지에 이부분을 들어가보자 클릭한 위치에 마커 표시하기를 해볼거니까

function(){
  const Main = () => {
    const [position, setPosition] = useState()
    return (
      <>
        <Map // 지도를 표시할 Container
          center={{
            // 지도의 중심좌표
            lat: 33.450701,
            lng: 126.570667,
          }}
          style={{
            width: "100%",
            height: "450px",
          }}
          level={3} // 지도의 확대 레벨
          onClick={(_t, mouseEvent) => setPosition({
            lat: mouseEvent.latLng.getLat(),
            lng: mouseEvent.latLng.getLng(),
          })}
        >
          {position && <MapMarker position={position} />}
        </Map>
        {position && <p>{'클릭한 위치의 위도는 ' + position.lat + ' 이고, 경도는 ' + position.lng + ' 입니다'}</p>}
      </>
    )
  }
  return (<Main/>)
}

해당 샘플 코드가 나와있는걸 볼 수 있다

 

본인은 해당 부분을 컴포넌트 화 하기위해서 이전에 생성한 components 폴더에 MakerEvent.js 라고 새로운 파일을 생성한뒤 작성했다

 

이걸 이제 그대로 복사 붙여넣기 하면 끝나는건 아니고 딱 필요한 부분만 적혀있기때문에 입맛대로 추가해줘야하는데

먼저 상단에

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

 임포트 부터 해주자 잊으면 안된다

const [position, setPosition] = useState() 부분에서 useState를 사용하고 있으니 해당부분을 임포트 해주어야하고

Map과 MapMarker또한 사용하고 있으니 임포트 해주어야한다

 

funtion또한 이름이 안붙어 있으니 붙여준다 

마지막으로 이걸 컴포넌트 화 했으니

export default MakerEvent; 를 넣어주자 

그렇게 되면 최종 코드로는

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

function MarkerEvent(){
  const Main = () => {
    const [position, setPosition] = useState()
    return (
      <>
        <Map // 지도를 표시할 Container
          center={{
            // 지도의 중심좌표
            lat: 33.450701,
            lng: 126.570667,
          }}
          style={{
            width: "100%",
            height: "450px",
          }}
          level={3} // 지도의 확대 레벨
          onClick={(_t, mouseEvent) => setPosition({
            lat: mouseEvent.latLng.getLat(),
            lng: mouseEvent.latLng.getLng(),
          })}
        >
          {position && <MapMarker position={position} />}
        </Map>
        {position && <p>{'클릭한 위치의 위도는 ' + position.lat + ' 이고, 경도는 ' + position.lng + ' 입니다'}</p>}
      </>
    )
  }
  return (<Main/>)
}
export default MarkerEvent;

이렇게 완성되고 완성한 코드를 App.js에서 불러오자

import MarkerEvent from "./components/MarkerEvent";

function App() {
  return (
    <div>
      <MarkerEvent></MarkerEvent>
      
    </div>
  );
}

export default App;

결과물을 보면

잘되는거 같다 클릭한 위치에 마커가 생성되고 있고 위도와 경도도 표시된다

위도와 경도는 필요없으니 나중에 지워보자

 

카카오맵 공식 doc에서는 자바스크립트만 지원하고 있어 react 코드로 변환하는데 어려움이 조금 있는데

이렇게 sdk를 활용하면 좀더 편하게 활용할 수 있다

오류만빼면..