[REACT/VITE]카카오맵 api

현재 프로젝트에 지도가 필요해서 지도 API를 현재 REACT 프로젝트에 적용시켜보려고 한다.

1. 카카오 개발자 사이트에서 회원가입

2. 카카오맵 API 링크로 접속한다.

3. APP KEY 발급 선택
   

4. 어플리케이션 추가하기
   
   5.앱 이름과 여러 정보들을 입력하고
   6.일단 로컬에서 실행할거니까 localhost:5173으로 등록해줄 것이다.

5. 그러면 등장하는 앱 키에서 Javascript키를 복사해준다.
   

8. 다음과 같이 넣어주면 된다는데,

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY."></script>

이걸 .env , .env.local과 같은 곳에 저장해서 불러오려면
REACT일때 , REACT_APP_API_KEY 이런식으로 설정해야한다고 하는데,
API_KEY가 "abcd1234"라고 가정했을 떄 ,

.env.local

REACT_APP_API_KEY = abcd1234

이렇게 저장해서 쓰려면 이제

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_API_KEY"></script>

이렇게하면 될줄알았는데, 불러와지지가 않는다.
알고보니
VITE 환경에서는 또 VITE_로 시작해야한다고 해서
VITE_KAKAO_MAP = abcd1234로 해주면 잘 적용이 된다!

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_KAKAO_MAP"></script>

이제 맵을 띄워보자
나는 Map이라는 컴포넌트에 다음과 같이 작성해주었다.

const { kakao } = window;

해당 부분을 넣어줘야 kakao map api로 가져오면 window에 전역객체에 들어가는데, 이를 명시해주면 접근이 가능하다.

그렇게 예시코드를 복사해준뒤 useEffect에 넣어주면 ,,,?

import React, { useEffect } from "react";
const { kakao } = window;

export default function Map() {
  useEffect(() => {
    const container = document.getElementById("map");
    const options = {
      center: new kakao.maps.LatLng(33.450701, 126.570667),
      level: 3,
    };
    const map = new kakao.maps.Map(container, options);
  }, []);

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

정상적으로 출력되는 것을 알 수 있다.