React Hooks / 리액트 훅스로 카카오맵 API 초간단하게 적용해보자!

공식 문서에는 순수 JavaScript를 이용한 API 적용 방식만 기재되어 있기에, React Hooks 환경으로 코드를 변형하기 힘들어 하시고 있는 분들에게 도움이 되었으면 좋겠습니다❗️

 

 

 

 

 

 

1. Kakao 지도 Javscript API 키 발급 받기

 

developers.kakao.com/

Kakao Developers

위 주소로 접속, 로그인 후  내 애플리케이션을 클릭합니다.

 

 

 

그러면 위의 첨부사진에 있는 "애플리케이션 추가하기"를 선택

 

 

 

 

 

앱 이름과 사명자명을 기재해야하는데, 추후 수정도 되는 부분이니 적당하게 기입해주세요.

 

 

 

 

 

 

 

 

"앱 설정 > 요약 정보"에 JavaScript 키에 키를 복사하시면 키 발급은 끝입니다!

 

 

2. 코드에 적용해서 맵 띄우기

 

이제 본격적으로 공식 문서의 순수 Javascript 절차와 비교하면서 코드를 작성하여 맵을 띄우는 작업을 해보겠습니다!

 

(1) 지도를 나타낼 div 생성

 

📌 JavaScript

 

📌 React Hooks

<div
      className="map"
      style={{ width: "500px", height: "500px" }}
    ></div>

 

 

 

 

(2) Kakao 지도 API 불러오기

 

처음에 발급 받았던 키를 불러와주는 작업입니다.

코드 내에 설명대로 키를 꼭 바꿔서 넣어주세요❗️

 

📌 JavaScript

 

 

 

📌 React Hooks

 

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

index.html 안의 header 에 스크립트 코드를 넣어줍니다.

 

 

 

 

 

 

 

 

 

(3) 지도 띄우는 코드 작성

 

 

📌 JavaScript

 

 

 

📌 React Hooks

 

import React, { useRef, useEffect } from "react";

const options = {
  //지도를 생성할 때 필요한 기본 옵션
  center: new window.kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
  level: 3, //지도의 레벨(확대, 축소 정도)
};

function Home() {
  const container = useRef(null); //지도를 담을 영역의 DOM 레퍼런스

  useEffect(() => {
    new window.kakao.maps.Map(container.current, options); //지도 생성 및 객체 리턴
    return () => {};
  }, []);

  return (
    <div
      className="map"
      style={{ width: "500px", height: "500px" }}
      ref={container}
    ></div>
  );
}

export default Home;

 

JavaScript와 비교해보자면,

1. getElementById로 요소를 불러오는 부분은 useRef를 사용

2. kakao 객체 앞에 window. 추가(kakao 객체 사용하는 모든 코드에 적용)

3. 맵을 띄우기 위해서 useEffect 사용(container.current 로 수정)

4. 맵을 띄우는 div에 ref 적용

 

 

여기까지 작성하시면 정상적으로 실행하실 수 있습니다!

 

 

이후 추가적인 구현을 위한 정보는 카카오맵 API 공식 문서에서 얻으실 수 있습니다!

apis.map.kakao.com/web/