Kakao Map

---

🗺️ Kakao Map이란?

정의

Kakao Map은 카카오 지도 API를 이용해 웹 페이지에 지도를 표시하고 조작할 수 있게 해주는 서비스다.

React에서는 외부 스크립트를 불러온 뒤 useEffect로 지도를 초기화하는 방식으로 자주 사용한다.

🧩 기본 구조

• index.html에서 Kakao Map SDK 스크립트를 불러온다.
• App 또는 별도 컴포넌트에서 지도를 렌더링한다.
• useEffect에서 지도 객체를 생성한다.

🛠️ SDK 스크립트 추가

index.html에 Kakao Map SDK를 추가한다.

<script
  type="text/javascript"
  src="//dapi.kakao.com/v2/maps/sdk.js?appkey=YOUR_APP_KEY"
></script> 
{: .notice}  

⚙️ 지도 생성 예시

import { useEffect } from "react";

function KakaoMap() {
  useEffect(() => {
    const container = document.getElementById("map");
    const options = {
      center: new kakao.maps.LatLng(33.450701, 126.570557),
      level: 3,
    };

    new kakao.maps.Map(container, options);
  }, []);

  return (
    <div
      id="map"
      style=
    />
  );
}

export default KakaoMap;

🧠 주의점

• SDK 스크립트가 먼저 로드돼 있어야 한다.
• useEffect는 빈 배열로 두어 한 번만 지도 객체를 생성하는 것이 일반적이다.
• container가 존재하지 않으면 지도가 생성되지 않는다.
• API 키는 실제 배포 환경에서 노출되지 않도록 주의해야 한다.

📌 정리

• Kakao Map은 외부 지도 API를 React에서 사용할 때 자주 쓰인다.
• SDK 스크립트 추가와 useEffect 초기화 순서가 중요하다.
• 지도 화면은 별도 컴포넌트로 분리하면 관리하기 편하다.

---

연결문서

• React-Component
• React-Props
• React-JSX
• React-EventHandler
• useEffect