[React] React에서 카카오맵 사용하기

안녕하세요, hr0513입니다!

요즘 카카오맵을 리액트 프로젝트에 넣어야 해서, react-kakao-maps-sdk 라이브러리를 사용해봤어요.

이번에는 그 과정을 공유하려고 해요. 카카오맵을 리액트에서 쉽게 사용할 수 있는 방법을 알려드릴게요!

반응형

---

1. 설치하기

먼저, react-kakao-maps-sdk 라이브러리를 설치해야 해요. 터미널에 아래 명령어를 입력해서 설치해 주세요.

npm install react-kakao-maps-sdk

 

 

그 다음, 카카오맵 API 샘플 문서도 참고할 수 있는 아래 링크를 참고하시면 좋습니다!

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

Index | react-kakao-maps-sdk docs

---

2. 기본 맵 만들기

이제 카카오맵을 리액트에서 띄울 수 있게 설정을 해볼게요. 코드 예시는 이렇게 작성했어요:

import { Map } from "react-kakao-maps-sdk"
import useKakaoLoader from "./useKakaoLoader"

export default function BasicMap() {
  useKakaoLoader()

  return (
    <Map // 지도를 표시할 Container
      id="map"
      center={{
        // 지도의 중심좌표
        lat: 33.450701,
        lng: 126.570667,
      }}
      style={{
        // 지도의 크기
        width: "100%",
        height: "350px",
      }}
      level={3} // 지도의 확대 레벨
    />
  )
}

---

3. Kakao API 로딩

카카오맵 API를 사용하려면, useKakaoLoader라는 훅을 통해 카카오맵 API를 로드해야 해요. 이 부분도 코드로 보여드릴게요!

import { useKakaoLoader as useKakaoLoaderOrigin } from "react-kakao-maps-sdk"

export default function useKakaoLoader() {
  useKakaoLoaderOrigin({
    /** 
     * 
     * @참고 https://apis.map.kakao.com/web/guide/
     */
    appkey: "여기에 본인의 appkey를 입력해 주세요",
    libraries: ["clusterer", "drawing", "services"],
  })
}

---

이렇게 하면 리액트에서 카카오맵을 사용할 준비가 끝났어요

잘 활용해 보세요!