kakaoMap

---

기본 설정

이번 목차

• 애플리케이션 추가하기
• 플랫폼 설정하기

사전에 kakao developers 로그인을 하셔야 합니다.

첫번째로 해야 할 단계는 내 애플리케이션에 들어가서 애플리케이션을 추가하는 것입니다.
사진에 보시는 바와 같이 내 애플리케이션 항목에 들어가서 애플리케이션을 추가해 보세요.

그리고 나서 위에 사진과 같이 내가 추가한 애플리케이션이 만약 찬스 커피라고 한다면
찬스커피를 누르고 플랫폼을 설정해야 합니다.

사진에 보이는 바와 같이 플랫폼 설정하기를 누르고 원하는 플랫폼을 설정한 뒤에
내가 사용할 서버의 도메인을 입력하시면 됩니다.
예를 들어 내 local server 을 쓰고 있다면 http://localhost:4000 을 입력하시면 됩니다.

이렇게 까지 하시면 초기 설정은 끝이 나요!!

그리고 위에 사진에서 앱 키 중에서 JavaScript 키는 밑에서 사용하니 다른 곳에 임시 저장해 두시는것을 추천합니다.

---

KakaoMap 시작하기

목차

• 최소 설정 하기
• 필요한 함수 넣기

처음으로 해야 할 것은 내가 원하는 컴포넌트에 집어넣어야 할 맵 입니다.
밑에 코드를 원하는 곳에 넣어주시면 됩니다.

다음으로는 root id 가 들어가 있는 index.html 에 script 를 넣어주시면 됩니다.
이때 발급받은 APP KEY 는 위에서 플랫폼을 설정할 때 JavaScript 키를 넣으시면 됩니다.

위에 사진에서 APIKey 부분에 아까 말했던 javascript key 를 넣어주시면 됩니다.

그 다음으로 내가 보여주고 싶은 map 이 있는 컴포넌트에 카카오 맵 함수를 등록하시면 됩니다.

center : map 을 처음 시작할 때 시작 좌표를 설정해 줍니다.
level : map 을 처음 시작할 때의 크기를 설정해 줍니다.

여기서 주의할 점은 Home 컴포넌트 최 상단에 window 안에 kakao 를 불러와야 합니다.

이유는 스크립트로 kakao maps api를 심어서 가져오면 window전역 객체에 들어가게 됩니다.
그런데 함수형 컴포넌트에서는 이를 바로 인식하지 못한다고 합니다.
그렇기 때문에 코드 상단에 const { kakao } = window를 작성하여 함수형 컴포넌트에 인지 시키고 window에서 kakao객체를 뽑아서 사용하면 됩니다.

이러한 과정을 완료하시면 kakaoMap 이 나오는 것을 확인하실 수 있습니다.

최종 코드

import { useEffect } from "react";

const { kakao } = window;

const MapPage = () => {

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

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

export default MapPage