[개발공부] 카카오 맵 API 사용하기 (nextJS & reactJS)

[@정현-v4x]

제가 몇시간이나 삽질중인것을 선생님이 해결해주셨습니다. 정말 감사합니다. 늘 건강하세요~~

[@bedcoding]

카카오 공식문서에는 순수 html + javascript로 짜여져 있길래 그걸 nextJS로 이식했고, 이후 reactJS 프로젝트에 복사 붙여넣기 해서 동작시켜봤습니다. kakao 객체를 가져올 때 nextJS에서는 new kakao 형태로 사용했는데, reactJS에서는 new window.kakao 형태로 사용했어서 차이는 거의 없었어요.
// 1. nextJS
import { useEffect } from "react";
const KakaoMap = () => {
useEffect(() => {
const kakaoMapScript = document.createElement('script')
kakaoMapScript.async = false
kakaoMapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=키입력&autoload=false`
document.head.appendChild(kakaoMapScript)
const onLoadKakaoAPI = () => {
window.kakao.maps.load(() => {
const container = document.getElementById('map')
const options = {
center: new window.kakao.maps.LatLng(33.450701, 126.570667),
level: 3,
}
// 1. 지도 띄우기
const map = new kakao.maps.Map(container, options);
// 2. 중앙에 핀 꽂기
let marker = new kakao.maps.Marker({
map: map,
position: map.getCenter()
});
// 3. 다른 핀 꽂기
new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: new kakao.maps.LatLng(33.450936, 126.569477)
});
new kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: new kakao.maps.LatLng(33.450879, 126.569940),
title: "종말의 지점"
});
// 4. 클릭 이벤트
kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
// 클릭한 위도, 경도 정보를 가져옵니다
const latlng = mouseEvent.latLng;

// 마커 위치를 클릭한 위치로 옮깁니다
marker.setPosition(latlng);

let message = '클릭한 위치의 위도는 ' + latlng.getLat() + ' 이고, ';
message += '경도는 ' + latlng.getLng() + ' 입니다';

const resultDiv = document.getElementById('clickLatlng');
resultDiv.innerHTML = message;
});
})
}
kakaoMapScript.addEventListener('load', onLoadKakaoAPI)
}, [])
return (


지도를 클릭해주세요!


)
}
export default KakaoMap;
// 2. reactJS
import { useEffect } from "react";
const KakaoMap = () => {
useEffect(() => {
const kakaoMapScript = document.createElement('script')
kakaoMapScript.async = false
kakaoMapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=키입력&autoload=false`
document.head.appendChild(kakaoMapScript)
const onLoadKakaoAPI = () => {
window.kakao.maps.load(() => {
const container = document.getElementById('map')
const options = {
center: new window.kakao.maps.LatLng(33.450701, 126.570667),
level: 3,
}
// 1. 지도 띄우기
const map = new window.kakao.maps.Map(container, options);
// 2. 중앙에 핀 꽂기
let marker = new window.kakao.maps.Marker({
map: map,
position: map.getCenter()
});
// 3. 다른 핀 꽂기
new window.kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: new window.kakao.maps.LatLng(33.450936, 126.569477)
});
new window.kakao.maps.Marker({
map: map, // 마커를 표시할 지도
position: new window.kakao.maps.LatLng(33.450879, 126.569940),
title: "종말의 지점"
});
// 4. 클릭 이벤트
window.kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
// 클릭한 위도, 경도 정보를 가져옵니다
const latlng = mouseEvent.latLng;

// 마커 위치를 클릭한 위치로 옮깁니다
marker.setPosition(latlng);

let message = '클릭한 위치의 위도는 ' + latlng.getLat() + ' 이고, ';
message += '경도는 ' + latlng.getLng() + ' 입니다';

const resultDiv = document.getElementById('clickLatlng');
resultDiv.innerHTML = message;
});
})
}
kakaoMapScript.addEventListener('load', onLoadKakaoAPI)
}, [])
return (


지도를 클릭해주세요!


)
}
export default KakaoMap;