[MapContainer.js]
// side effects를 수행 할 수 있는 useEffect를 import
/* side effects = react의 Component 내에서 데이터를 로드하거나 구독 할 수 있고
DOM을 조작 하는 작업을 의미한다. */
import React, { useEffect } from ‘react’;
import “./MapContents.css”;
// "kakao"이라 명명된 변수를 window 객체에 포함하여 선언
const { kakao } = window
const MapContainer = ({ kakaoMaps }) => {
useEffect(() => {
// 지도를 브라우저 상에 표시할 div Element를 설정
const container = document.getElementById('myMap')
// 지도의 좌표 값 및 확대 레벨을 설정
const options = {
center: new kakao.maps.LatLng(37.2100104526833, 127.05926918036364),
level: 3,
}
// 지도를 브라우저 상에 표시할 div Element와 지도 옵션을 로드
const map = new kakao.maps.Map(container, options)
// 일반 지도와 스카이뷰 지도 타입을 전환 시키는 지도 타입 변환 컨트롤러 생성
const mapTypeControl = new kakao.maps.MapTypeControl();
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
// 지도의 확대 및 축소를 제어하는 줌 컨트롤을 생성
const zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT)
}, [kakaoMaps])
return (
<div className="map_wrap" id="myMap" style={{width: '1000px', height: '800px', position: "relative", overflow: "hidden", display: "block"}}>
<div className="hAddr">
<span className="title">지도중심 기준 주소</span>
<span id="centerAddr"></span>
</div>
<div style={{background: "black"}}></div>
</div>
)
}
export default MapContainer;
