[React] Vite에서 카카오맵 API 환경변수로 사용하기

📌

카카오 공식 문서에서는 index.html에 직접 스크립트를 추가하는 방식이 소개되어 있지만, 나는 환경변수를 활용한 방법을 원했다. 그래서 아래와 같은 방법을 사용했다.

• API key를 환경변수 import.meta.env.VITE_KAKAO_MAP_API_KEY로 설정하여 보안성을 높이고, 코드의 유연성을 확보했다.
• 스크립트를 동적으로 추가하여 index.html에 직접 코드를 작성하지 않아도 된다.

◼ 예시

import { useEffect } from "react";

const KakaoMap = () => {
  useEffect(() => {
    // 카카오맵 스크립트를 HTML에 동적으로 추가
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${import.meta.env.VITE_KAKAO_MAP_API_KEY}&autoload=false`;
    document.head.appendChild(script);

    // 스크립트가 로드된 후 실행
    script.onload = () => {
      window.kakao.maps.load(() => {
        var container = document.getElementById("map");
        var options = {
          center: new window.kakao.maps.LatLng(33.450701, 126.570667),
          level: 4
        };

        var map = new window.kakao.maps.Map(container, options);
      });
    };
  }, []);

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

export default KakaoMap;