Kakao.js
import React, { useEffect } from 'react';
const { kakao } = window;
function Kakao() {
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: '100vw',
height: '100vh'
}}></div>
)
}
export default Kakao;App.js
import './App.css';
import Kakao from './Kakao';
function App() {
return (
<div className="App">
<Kakao/>
</div>
);
}
export default App;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=내javascript키"></script>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=내javascript키"></script>
이 부분만 작성하면 된다.
github : https://github.com/chxxrin/Kakaomap
참고자료 : https://velog.io/@tpgus758/React%EC%97%90%EC%84%9C-Kakao-map-API-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
