카카오 Map API with React + TypeScript

 1. 카카오 API 

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

카카오 API 사이트에서 키발급하기를 누른다. 
애플리케이션 추가하기를 누른다. 뜨는 창에 애플리케이션 정보를 입력하면 끝 😚
만들어진 애플리케이션을 클릭하여 쓰여진 정보를 입력하고, 플랫폼 등록을 하면된다. 
임시적으로 플랫폼 주소는 http://localhost:3000으로 지정하면 된다.
아래 카카오 지도 가이드를 참고 하면 된다.
 
[카카오 지도 가이드]
https://apis.map.kakao.com/web/guide/
 

 2. React + TypeScript에서 카카오맵 이용하기

1. 우선 발급 받은 key를 .env파일을 만들어 넣어준다. 

env 파일이란?

포트, DB관련 정보, API_KEY등의 환경변수 파일이다. 주로 오픈소스에 올라가면 안되는 것이 존재한다. 
반드시 gitignore 에 .env 를 추가해야 한다

 
최상위 폴더에 .evn 파일을 만들어야 한다. 

REACT_APP_지정한 변수 = 값

 
으로 입력하여 사용하면 된다. 
2. script 태그를 추가해준다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_KAKAO_MAP_KEY%&libraries=services&autoload=false"></script>

주로 사용할 것 같아서 public 폴더에 있는 index.html 파일에 추가해주었다. 
 
3. kakao map 관련 코드 넣기
 

타입스크립트를 사용하기 때문에 kakao 에 대한 타입을 명시해 줄 필요가 있다 ! 

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

 

다음 공식 문서에 있는 코드를 좀 수정 했다.
해당 코드를 넣으면 실행이 잘 된다..!

  useEffect(() => {
    window.kakao.maps.load(() => {
      const container = document.getElementById('map');
      const options = {
        center: new window.kakao.maps.LatLng(33.450701, 126.570667),
        level: 10,
      };
      const map = new window.kakao.maps.Map(container, options);
    });
  }, []);

 
끝 !
 
 
 

 

---

전체 코드 

import React, { useEffect, useState } from 'react';

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

const Main = () => {
  useEffect(() => {
    window.kakao.maps.load(() => {
      const container = document.getElementById('map');
      const options = {
        center: new window.kakao.maps.LatLng(33.450701, 126.570667),
        level: 3,
      };
      const map = new window.kakao.maps.Map(container, options);
    });
  }, []);

  return (
    <>
      <div
        id="map"
        style={{
          width: '100vw',
          height: '100vh',
        }}
      ></div>
    </>
  );
};

export default Main;