React: Kakao map API 사용하기

자바 스크립트에서 돌아가던 카카오맵 코드를 리액트로 그대로 옮기니 에러가 엄청 생겼다.

당연한 말이겠지만, 조금 수정한 것도 아니고 갈아엎다시피 했기 때문에 글로 남겨놓는다.

 

 

Kakao Developers에서 앱 등록하기

카카오맵 API를 사용하기 위해서는 아래 링크에서 어플리케이션 등록을 해야한다.

https://developers.kakao.com/

위 화면에서 내 애플리케이션을 클릭한다.

 

애플리케이션 추가하기를 누르면 아래 정보를 기입하라는 모달창이 뜬다.

• 앱 아이콘
• 앱 이름
• 사업자명
• 카테고리

내용은 아무렇게 기입하면 된다. 나는 test라는 이름으로 생성하였다.

 

앱을 추가한 후, 해당 앱으로 들어오면 위와 같은 화면이 나타난다. 플랫폼 항목에서 플랫폼 설정하기를 클릭한다.

 

Web 플랫폼 등록을 클릭한다.

 

필자는 로컬 환경에서 테스트 할 것이기 때문에 localhost로 해주었다.

저장을 하게 되면, 성공적으로 Web 플랫폼이 등록이 완료된 것을 확인할 수 있다.

이제 리액트에서 카카오맵 API를 사용해보도록 하겠다.

주요 함수나 사용법 등은 아래 가이드 문서에서 확인 가능하다.

https://apis.map.kakao.com/web/guide/

 

 

React에서 카카오맵 API 사용

먼저, public/index.html에 발급받은 키를 넣어준다.

 

<script 
    type="text/javascript" 
    src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은키"
></script>

body 안의 맨 아랫줄에 삽입해준다.

다음으로 지도를 띄울 영역을 만들어준다.

 

import React from "react";
import styled from "styled-components";

function Main() {
    return (
        <>
            <Map id="map" />
        </>
    );
}

// 지도 스타일
const Map = styled.div`
    position: relative;
    width: 100vw;
    height: 100vh;
`

영역을 만들어주었으니, 지도를 띄우는 코드를 작성한다.

 

/*global kakao*/
import React, { useState, useEffect } from "react";
import styled from "styled-components";

function Main() {
    // 지도를 담을 변수 생성
    const [map, setMap] = useState(null);

    // 카카오맵 초기화
    const initMap = () => {
        const container = document.getElementById('map');
        const options = {
            center: new kakao.maps.LatLng(37.536172, 126.976978),
            level: 3,
        };
        const map = new kakao.maps.Map(container, options);
        setMap(map);
    };

    // 페이지 렌더링이 끝난 후 실행 (1회 실행)
    useEffect(() => {
        initMap();
    }, []);

    return (
        <>
            <Map id="map" />
        </>
    );
}

카카오맵을 초기화하는 initMap을 선언해주었다. map 객체를 담는 컨테이너를 id를 통해 받아오고, options 변수 안에 맵에 대한 설정값을 넣어줄 수 있다. center는 처음 지도가 사용자에게 보여줄 좌표이고, level은 지도의 확대 정도이다.

위 코드를 작성할 때 유의할 점이 있는데, 반드시 /*global kakao*/를 코드 최상단에 작성해주어야 한다는 것이다. 작성하지 않을 경우 kakao를 찾지 못해 오류가 발생하게 된다.

이제 저장 후 npm start로 리액트 앱을 실행시키면 아래 사진처럼 잘 작동하는 모습을 확인할 수 있다.