[REACT] kakao지도

react에서 kakao지도를 추가할 때

 

1. header에 script 코드를 동적으로 넣어준다.(useEffect사용)

 useEffect(() => {
    const script = document.createElement("script");
    script.src =
      "//dapi.kakao.com/v2/maps/sdk.js?appkey=bfd444b07ffd852d15ab9bfa726c6b6a";
    document.head.appendChild(script);
  }, []);

헤더 맨 밑에 추가되었다

2. 동적으로 추가할 경우 주의사항 ( 문서 확인하기 )

script.src =
      "//dapi.kakao.com/v2/maps/sdk.js?appkey=bfd444b07ffd852d15ab9bfa726c6b6a&autoload=false";

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

위의 useEffect 안쪽에 있던 script.src에 맨 뒤에 autoload=false를 추가하는데,

이미 앱키가 쿼리로 들어가 있기 때문에 추가하려면

"?autoload=false" 대신 "&autoload=false"로 넣어줘야 한다.

 

3. container를 useRef로

- 전체소스

import React, { useRef, useEffect } from "react";
import "./App.css";

declare global {
  interface Window {
    kakao: any;
  }
}
function App() {
  const mapRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const script = document.createElement("script");
    script.src =
      "//dapi.kakao.com/v2/maps/sdk.js?appkey=bfd444b07ffd852d15ab9bfa726c6b6a&autoload=false";
    document.head.appendChild(script);
    script.onload = () => {
      if (mapRef.current) {
        window.kakao.maps.load(() => {
          var options = {
            //지도를 생성할 때 필요한 기본 옵션
            center: new window.kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
            level: 3, //지도의 레벨(확대, 축소 정도)
          };
          var map = new window.kakao.maps.Map(mapRef.current, options);
        });
      }
    };
    return () => script.remove();
  }, []);

  return (
    <div className="App">
      <div ref={mapRef} style={{ width: 300, height: 300 }}></div>
    </div>
  );
}

export default App;

 

갖고 있던 모든 프로젝트의 카카오지도를 혼자서 담당했기 때문에,

두달 가까이 매일매일 카카오지도 API만 만졌는데,

React로 만나니 또 새로운 코드가 되었다.