<--SyntaxHighlighter--> SyntaxHighlighter.all();

1. App key 발급

https://apis.map.kakao.com/web/guide/ 사이트에 접속해서 순서대로 진행합니다.

우선 카카오 개발자사이트 (https://developers.kakao.com) 접속하여 회원가입을 하고,

애플리케이션 추가하기를 통해 앱 생성을 합니다.

생성된 앱(mymap)을 클릭해 들어가면 사용할 수 있는 앱 키가 제공됩니다.

 

이렇게 간단히 앱키 발급이 완료되었습니다.

 

2. Sample React App 생성

리액트 앱을 생성하고, 간단히 소스를 추가해보겠습니다.

 

1) public/index.html

아래 코드를 /public/index.html 파일의 <head> 내부에 붙여넣습니다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>

2) 지도를 띄우는 코드 작성

</src/container/MapContainer.js>

import React, { useEffect } from 'react';

const { kakao } = window;

const MapContainer = () => {

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

  return (
    <div id='myMap' style={{
      width: '800px', 
      height: '800px'
    }}></div>
  );
}

export default MapContainer;

</src/App.js>

import './App.css';
import MapContainer from './container/MapContainer';

function App() {
  return (
    <div className="App">
      <header className="App-header">
      <MapContainer />
      </header>
    </div>
  );
}

export default App;

 

3. 결과

+ Recent posts