앱키를 이용해 지도띄우기

이제 받아온 앱키를 이용해 지도를 띄워보자!

지도 띄울 영역 만들기

먼저 지도를 띄울(담을) 영역이 필요하다.
지금 현재 개발하는 것을 기준으로 설명하도록 하겠다.

지도를 띄울 부분을 하위컴포넌트로 분리하여 진행하였다.
(styled component도 처음으로 사용중.)

import React, { Component } from "react";
import styled from "styled-components";

class MapContent extends Component {
  render() {
    return <MapContents id="Mymap"></MapContents>; // 이부분이 지도를 띄우게 될 부분.
  }
}

const MapContents = styled.div`
  width: 100%;
  height: 100%;
`;

export default MapContent;

위의 코드를 보면 지도를 띄울 div를 만들고 id값으로 Mymap을 주었다.
이 Mymap이란 id를 지정해준 영역이 지도를 띄우게 될 영역이 되는 것.

지도api 불러오기

이제 영역에 지도를 그려줄 지도 api를 불러와야한다.

class MapContent extends Component {
  componentDidMount() {
    const script = document.createElement("script");
    script.async = true;
    script.src =
      "https://dapi.kakao.com/v2/maps/sdk.js?appkey=본인의 앱키&autoload=false";
    document.head.appendChild(script);
  }

  render() {
    return <MapContents id="Mymap"></MapContents>;
  }
}

const MapContents = styled.div`
  width: 100%;
  height: 100%;
`;

export default MapContent;

컴포넌트가 마운트된 직후에 외부에서 무언가 데이터를 받아와야하기 때문에
componentDidMount안에서 script.src로 url을 써주었다.
본인의 앱키 라고 적혀있는 부분에 본인의 javascript앱키를 적어준다.

참고

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

이 태그를 index.html 파일의 head태그 안에 넣어도 되지만
한눈에 보면서 진행하기 위해 componentDidMount에서 script Element를 만들어준뒤에 head에 append하는 방식으로 진행하였다.

지도를 띄우는 코드 작성하기

class MapContent extends Component {
  componentDidMount() {
    const script = document.createElement("script");
    script.async = true;
    script.src =
      "https://dapi.kakao.com/v2/maps/sdk.js?appkey=본인의 앱키&autoload=false";
    document.head.appendChild(script);

    script.onload = () => {
      kakao.maps.load(() => {
        let container = document.getElementById("Mymap");
        let options = {
          center: new kakao.maps.LatLng(37.506502, 127.053617),
          level: 7
        };

        const map = new window.kakao.maps.Map(container, options);
     
      });
    };
  }

여전히 componentDidMount안에서 onload함수안에 kakao.maps.load 함수를 만들어준다.

script가 onload되면 그안의 kakao.maps.load함수가 실행되는데,
container라는 변수는 render에서 만들어두었던 Mymap이라는 아이디를 가진 DOM의 레퍼런스가 담겨있고,
options라는 변수는 객체로 이루어져있는데 지도의 처음 로드될 때 보여질 부분의 좌표가 담겨있는 center key와 지도의 확대축소 레벨을 지정할 수 있는 level key가 객체로 담겨있다.
options는 지도가 생성될 때 기본적으로 필요한 부분이기에 누락되면 안된다.

이제 이 변수들을 가지고 지도를 생성하고 객체를 리턴해줄 map을 작성하면 지도가 나타난다!

혹여나 eslint 덕분에 kakao라는게 뭔지 모르겠다는 에러가 나게된다면,
import React 윗부분에

/*global kakao*/ <-- 이렇게 작성하게되면
import React, { Component } from "react";

kakao가 뭔지 모르겠다는 에러를 뱉어내지않고 지도가 정상적으로 뜬다!!

마커를 표시하는 방법은 다음 시간에 진행하도록 하겠다.