카카오맵(Kakao Map) Javascript API 사용하기 - 2)

저번 포스팅에서 카카오맵 api를 사용할 앱과 도메인을 등록하는 과정까지 마쳤습니다. 이 다음 단계로, 리액트 웹 앱에 직접 api를 가져와서 지도를 띄워보겠습니다.

1. 개요

 

 

1. localhost 도메인 등록

2. HTML script 추가

3. React component에서 map 생성

4. 서버 실행

 

2. 실행

 

1. localhost 도메인 등록

  저번 포스팅에서는 카카오맵 apif를 사용할 깃허브 페이지 주소를 추가했었습니다. 개발 단계에서 카카오맵 api를 가져와야 하기 때문에, localhost:3000 과 같은 로컬호스트 url을 추가해줍니다. (로컬 서버라 안될 줄 알았는데, 잘 되더라구요..)

 

2. HTML 스크립트 추가

  이제는 카카오맵 api모듈을 가져오는 스크립트를 html파일에 추가해주어야 합니다.

보통 리액트 어플리케이션을 만들면 이와 같은 디렉터리 구조가 생성됩니다. 여기서 리액트 스크립트가 렌더링 되는 파일인 index.html 에 아래의 스크립트 코드를 추가해줍니다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=YOUR API KEY"></script>

YOUR API KEY 라고 써진 부분에는 앞서 만들었던 카카오 developers 앱의 Javascript 키를 붙여넣어 주어야 합니다.

내어플리케이션-설정-일반 에서 확인할 수 있습니다.

 

3. React component에서 map 생성

var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
	center: new kakao.maps.LatLng(33.450701, 126.570667), //지도의 중심좌표.
	level: 3 //지도의 레벨(확대, 축소 정도)
};

var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

이 코드를 이용해서 map api를 호출해야 합니다. 일단은 리액트 컴포넌트 내에서 지도가 위치할 div를 생성합니다.

<div className={style.map} id={`map`}></div>

window 객체로부터 스크립트에서 로드한 kakao api를 가져와야 하기 때문에 리액트 컴포넌트 상단에

const {kakao} = window;

이 코드를 써주므로써, kakao 객체를 사용할 수 있도록 해줍니다.

 

컴포넌트가 마운트 된 후, #map 태그를 찾아서 렌더링 해주어야 하기 때문에, useEffect 훅을 사용해서 카카오맵을 그려줍니다.

useEffect(() => {
        kakao.maps.load(() => {
            let el = document.getElementById('map');
            let map = new kakao.maps.Map(el, {
                center: new kakao.maps.Coords(523951.25, 1085073.75)
            })
        })

    }, []);

kakao.maps.load는 공식 문서에 따르면, 

v3 스크립트를 동적으로 로드하기위해 사용한다.
스크립트의 로딩이 끝나기 전에 v3의 객체에 접근하려고 하면 에러가 발생하기 때문에
로딩이 끝나는 시점에 콜백을 통해 객체에 접근할 수 있도록 해 준다.
비동기 통신으로 페이지에 v3를 동적으로 삽입할 경우에 주로 사용된다.
v3 로딩 스크립트 주소에 파라메터로 autoload=false를 지정해 주어야 한다.

와 같은 역할을 합니다.

 

따라서 이 load함수를 추가해주고, autoload=false 를 스크립트 주소에 추가해줍니다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=YOUR API KEY&autoload=false"></script>

전체 코드는 아래와 같습니다.

import React, {useEffect, useRef} from 'react';
import style from './Content.module.css';
import {
    Jumbotron,
    Container,
    Row,
    Col
} from 'reactstrap'
const {kakao} = window;


function Content() {
    const mapContainer = useRef();
    useEffect(() => {
        kakao.maps.load(() => {
            let el = document.getElementById('map');
            let map = new kakao.maps.Map(el, {
                center: new kakao.maps.Coords(523951.25, 1085073.75)
            })
        })

    }, []);
    return (
        <Container className={style.Wrapper} fluid={`sm`}>
            <Row>
                <Col>
                    <div className={style.map} id={`map`}>
                    </div>
                </Col>
            </Row>
        </Container>
    )
}

export default Content;

4. 서버 실행

  지금까지 만든 리액트 어플리케이션을 npm run start 또는 yarn start로 실행하면 리액트 dev서버가 실행되고, 

카카오맵 api가 잘 로드 된 것을 확인할 수 있습니다.