[FE / REACT] React에서 Kakao Map API 연동하기

안녕하세요 

오늘은 React + TypeScript 환경에서 Kakao Map API 연동하는 방법에 대해서 설명해드리겠습니다.

 

1. Kakao Map API Key 발급하기

아래 사이트에서 애플리케이션 추가하기 버튼을 클릭해 추가한 뒤 API key를 발급받습니다

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

 

 

그럼 다음과 같이 발급받은 앱 키 중에 Javascript 키를 선택합니다.

 

2. .env 파일에 키 추가하기

REACT_APP_KAKAO_API_KEY = 발급받은 키

이런식으로 .env 파일에 발급받은 키를 넣어줍니다.

 

3. 지도를 담을 파일 생성하기

저는 KakaoMap.tsx 파일을 추가해주었습니다.

import React, { useEffect } from 'react'
import image from '../../assets/images/marker-removebg-preview.png'

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

interface KakakMapProps {
  latitude : number | undefined;
  longitude : number | undefined;
}

export default function KakaoMap({latitude, longitude} : KakakMapProps) {

  useEffect(() => {
    const script = document.createElement('script');
    script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.REACT_APP_KAKAO_API_KEY}&autoload=false`;
    document.head.appendChild(script);

    script.onload = () => {
      window.kakao.maps.load(() => {
        const container = document.getElementById('map');
        const options = {
          center : new window.kakao.maps.LatLng(latitude,longitude),
          level : 3
        };
        const map = new window.kakao.maps.Map(container, options);

        const imageSize = new window.kakao.maps.Size(40,44);
        const imageOption = { offset: new window.kakao.maps.Point(18, 44) };

        const markerImage = new window.kakao.maps.MarkerImage(image, imageSize, imageOption);
        const markerPosition = new window.kakao.maps.LatLng(latitude,longitude);

        const marker = new window.kakao.maps.Marker({
          position : markerPosition,
          image : markerImage,
        });

        marker.setMap(map);
      })
    }
    return () => {
      document.head.removeChild(script);
    } 
  },[]);

  return (
    <div id='map' className='w-full h-[364px]'></div>
  )
}

 

다음처럼 코드를 작성해주면 됩니다!

코드를 동작해보면 지도를 잘 받아와지는 것을 볼 수 있습니다

참고로 저는 marker를 새롭게 커스텀해주었기 때문에 해당 코드도 추가 되어있습니다.!

 

 

이상입니다 :)