리액트 : 카카오 지도 Web API 사용하기

https://apis.map.kakao.com/web/

 

1. 토큰발급 후 : Guide > 지도를 띄우는 코드 작성 > 전체 코드 확인 ( 필요에 맞게 수정해서 사용)

<script

      type="text/javascript"

      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급한 app key를 넣으시면 됩니다."

    ></script>

1) sript태그는 index.html 부분에 추가하였음

const {kakao} = window;

2) kakao 객체를 사용하기 위해, window 객체로부터 스크립트에서 로드한 kakao api를 가져와야하기에 상단에 작성

  useEffect(() => {

    const container = document.getElementById('map');

    const option = {

      center: new kakao.maps.LatLng(33.450701, 126.570667),

      level: 3,

    };

    const map = new kakao.maps.Map(container, option);

  }, []);

3) useEffect에 넣어서 사용

 

[전체 코드 : map.jsx] 

import React from 'react';

const {kakao} = window;

function Map() {

  useEffect(() => {

    const container = document.getElementById('map');

    const option = {

      center: new kakao.maps.LatLng(33.450701, 126.570667),

      level: 3,

    };

    const map = new kakao.maps.Map(container, option);

  }, []);

  return (

    <div>

      <map id="map" style={{width: '100%', height: '100%'}}></map>

    </ div >

  );

}

 

return 문 안에서 import해서 사용

<Map>지도</Map>

 

 

음..! 지도는 나오는데 그 이후에 어떻게 해야할지 감이 안 잡힌다..!

조금 더 생각해봐야겠음..