React Kakao Map API 적용

안녕하세요.

오늘은 React APP에 Kakao Map API를 적용하는 방법에 대해 알아보겠습니다.

아래의 안내대로 천천히 따라오세요!

 

1. 카카오 개발자 사이트(https://developers.kakao.com/)에 가입하기

 

2. API 사용에 필요한 APP KEY를 발급 받기

https://apis.map.kakao.com/ 접속 후, 오른쪽 위의 'APP KEY 발급' 클릭하세요

애플리케이션 추가하기 버튼을 클릭하고, 상세 정보 입력한 후 저장 버튼을 누릅니다.

(등록한 애플리케이션을 클릭하면 앱 키 정보를 볼 수 있습니다. 아래의 제 개인 앱 키 정보는 가려두었습니다.)

3. 플랫폼 등록하기

왼쪽의 플랫폼 메뉴를 클릭한 후, 자신이 사용할 로컬 주소를 등록합니다.

저의 경우 local 주소를 등록했습니다.

 

4. 라이브러리 불러오기

public 폴더의 index.html 파일을 열어 다음 스크립트를 작성합니다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=your js app key&libraries=services,clusterer,drawing"></script> 

appkey 자리에는 위에서 발급받은 Javascript 키를 사용하면 됩니다!

📌꿀팁!

React CRA 사용할 경우 index.html 파일에 키를 직접 작성하지 않고 변수로 대체할 수 있습니다.
.env 파일을 만든 후, 다음과 같이 키를 등록하세요

REACT_APP_JS_APP_KEY=your js app key

index.html 에 다음 코드를 추가합니다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%REACT_APP_JS_APP_KEY%&libraries=services,clusterer,drawing"></script>

 

5. js 코드 작성하여 map 로드하기

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

const MapArea = () => {
  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: "100%", height: "100vh" }}></div>
    </>
  );
};

export default MapArea;

 

6. 서버 실행하여 결과 확인하기

다들 잘 따라오셨나요?

혹시 궁금한 점이나 자세한 설명이 필요한 부분이 있으면 댓글 남겨주시길 바랍니다!