Python(Flask)+React+SASS+mongoDB로 웹 서비스 제작하기 프로젝트(1-2) – Kakao Map API를 React Component로 만들기

이전에 살펴본 바로 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>

그리고 이에따른 결과는

상단 지도가 <div id = “Map”></div>
하단 텍스트가 <div id = “App”></div>이다.

다음에는 위치 검색을 위한 컴포넌트를 추가하고 검색 API를 활용하는 방법을 찾아서 원하는 위치에 핀을 꽂을 수 있는 단계까지 기능을 추가해보자!

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다