[카카오맵 API] React TypeScript에서 카카오맵 불러오기

 

 

 

1. API Key 발급 방법

https://developers.kakao.com/

Kakao Developers

 

 

1-1) 애플리케이션 추가

[내 애플리케이션] => [애플리케이션 추가하기]

애플리케이션 추가

 

 

1-2) API Key 복사

[요약 정보] => [JavaScript 키] 복사

API Key

 

1-3) 플랫폼 등록

[플랫폼] => [등록하기]  
사용하는 URL를 등록한다. 

플랫폼 등록

 

 

 

---

2. Script  불러오기

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

• autoload=false : script를 동적으로 로드하게 되면 로드가 다 끝나기도 전에 kakao api를 불러오는 코드가 먼저 실행 될 수 있기 때문에 이 autoload를 false로 만들어 자동으로 로드 되는 것을 꺼준다음, 코드 실행 부분에서 load 메서드를 사용하면 된다.

 

 

 

---

3. 코드

declare global {
  interface Window {
    kakao: any;
  }
}

export default function KakaoMap() {
    const [map, setMap] = useState<any>();
    const [marker, setMarker] = useState<any>();
      
    useEffect(() => {
    window.kakao.maps.load(() => {
      const container = document.getElementById("map");
      const options = {
        center: new window.kakao.maps.LatLng(33.450701, 126.570667),
        level: 3,
      };
      
      setMap(new window.kakao.maps.Map(container, options));
      setMarker(new window.kakao.maps.Marker());
    });
  }, []);
  
  return(<div id="map" style={{ width: "100%", height: "400px" }}></div>)
}

카카오맵