-
Python(Flask)+React+SASS+mongoDB로 웹 서비스 제작하기 프로젝트(1-2) – Kakao Map API를 React Component로 만들기Node 2021. 4. 27. 19:19
이전에 살펴본 바로 javascript를 통해 간단하게 지도를 삽입할 수 있었으나
앞으로 프로그램이 커짐과 동시에 분명히 지도의 좌표값을 기준으로 데이터를
주고받을 일이 생길 것이라고 확신했다.따라서 이를 위해 관련된 스크립트를 es6 문법에 맞게 작성하여 Component로
사용하기 위해서 검색을 하던 중 방법을 알게 됐다.
딴소리 필요 없고 소스부터 필요한 사람을 위해.../*global kakao*/ import React, {Component} from 'react'; import './Map.css'; class Map extends Component { componentDidMount(){ // 컴포넌트가 만들어지고 첫 렌더링을 다 마친 후 실행되는 메소드 const script = document.createElement('script'); script.async = true; // 브라우저가 페이지를 파싱되는 동안에도 스크립트가 실행됨. script.src = "https://dapi.kakao.com/v2/maps/sdk.js?appkey=aa9483f57241f9b715de6016ff873e83&autoload=false"; document.head.appendChild(script); script.onload = () => { // 페이지가 로드될 때 특정 함수를 호출시 사용 kakao.maps.load(() => { // 가져온 api에 포함된 함수 실행 let container = document.getElementById('map'); let options = { center: new kakao.maps.LatLng(37.536172, 126.976978), level: 3, } let map = new kakao.maps.Map(container, options); }); }; } render(){ return( <div className="Map" id="map"></div> ); } } export default Map;아직 스타일에 대한 부분을 본격적으로 하지 않았기 때문에 css를 사용했다.
이렇게 작성함으로 써 index.html은
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>OLLOC</title> </head> <body> <div id="Map"></div> <div id="root"></div> </body> </html>다음에는 위치 검색을 위한 컴포넌트를 추가하고 검색 API를 활용하는 방법을 찾아서 원하는 위치에 핀을 꽂을 수 있는 단계까지 기능을 추가해보자!
'Node' 카테고리의 다른 글