🗺 React Kakao Map SDK 사용하기

지은·2023년 1월 11일

React Kakao Map SDK

: Kakao Maps API를 react에 맞게 포팅한 라이브러리
ReactKakaoMapSKD

1. 설치

npm install react-kakao-maps-sdk

2. `<script>` 태그 추가

이 라이브러리를 사용하기 위해서는 필수적으로 Kakao Maps API를 불러와야 한다.
API 키 발급받는 법

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

맵 불러오기

import { Map } from 'react-kakao-maps-sdk';

const App = () => {
	return (
      <Map 
        center={{ lat: 33.5563, lng: 126.79581 }}   // 지도의 중심 좌표
        style={{ width: '800px', height: '600px' }} // 지도 크기
        level={3}                                   // 지도 확대 레벨
      >
      </Map>);
};

맵 위에 마커 표시하기

import { Map, MapMarker } from 'react-kakao-maps-sdk';

const App = () => {
	return (
		<Map 
          center={{ lat: 33.5563, lng: 126.79581 }} 
          style={{ width: '800px', height: '600px' }}
          level={3} 
        >
			<MapMarker position={{ lat: 33.55635, lng: 126.795841 }}> </MapMarker> // 마커 좌표
		</Map>
	);
};

마커 여러 개 표시하기

import { Map, MapMarker } from 'react-kakao-maps-sdk';

const App = () => {
	const locations = [
		{ title: '카카오', latlng: { lat: 33.450705, lng: 126.570677 } },
		{ title: '생태연못', latlng: { lat: 33.450936, lng: 126.569477 } },
		{ title: '텃밭', latlng: { lat: 33.450879, lng: 126.56994 } },
		{ title: '근린공원', latlng: { lat: 33.451393, lng: 126.570738 } },
	];

	return (
		<Map center={{ lat: 33.450701, lng: 126.570667 }} style={{ width: '800px', height: '600px' }} level={3}>
			{locations.map((loc, idx) => (
				<MapMarker
					key={`${loc.title}-${loc.latlng}`}
					position={loc.latlng}
					image={{
						src: 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png',
						size: { width: 24, height: 35 },
					}}
					title={loc.title}
				/>
			))}
		</Map>
	);
};

맵 위에 커스텀 오버레이 표시하기

import { Map, CustomOverlayMap } from 'react-kakao-maps-sdk';

const App = () => {
	return (
		<Map 
          center={{ lat: 33.5563, lng: 126.79581 }} 
          style={{ width: '800px', height: '600px' }}
          level={3} 
        >
			<CustomOverlayMap position={{ lat: 33.55635, lng: 126.795841 }}>
				<div className='overlay'>Here!</div>
			</CustomOverlayMap>
		</Map>
	);
};

지도 확대/축소 버튼

import './App.css';
import React, { useState } from 'react';
import { Map, CustomOverlayMap } from 'react-kakao-maps-sdk';

const App = () => {
	const [level, setLevel] = useState(3);
	return (
		<Map 
          center={{ lat: 33.5563, lng: 126.79581 }} 
          style={{ width: '800px', height: '600px' }} 
          level={level}
        >
			<CustomOverlayMap position={{ lat: 33.55635, lng: 126.795841 }}>
				<div className='overlay'>Here!</div>
			</CustomOverlayMap>
			<button onClick={() => setLevel(level + 1)}>-</button>
			<button onClick={() => setLevel(level - 1)}>+</button>
		</Map>
	);
};

Geolocation API

: 사용자의 위치 정보를 웹 애플리케이션에 제공할 수 있는 API
개인정보 보호를 위해서 브라우저는 사용자에게 위치 정보에 대한 권한을 받은 후 위치 정보를 사용할 수 있다.

Geolocation.getCurrentPosition() : 기기의 현재 위치를 가져오는 메소드
Geolocation.watchPosition() : 기기의 위치가 바뀔 때마다, 새로운 위치를 사용하여 함수를 호출한다.

geolocation으로 현재 위치 마커 표시하기

import React, { useState, useEffect } from 'react';
import { Map, MapMarker } from 'react-kakao-maps-sdk';

const App = () => {
	const [location, setLoacation] = useState(null); // 현재 위치를 저장할 상태

	useEffect(() => {
		navigator.geolocation.getCurrentPosition(successHandler, errorHandler); // 성공시 successHandler, 실패시 errorHandler 함수가 실행된다.
	}, []);

	const successHandler = (response) => {
		console.log(response); // coords: GeolocationCoordinates {latitude: 위도, longitude: 경도, …} timestamp: 1673446873903
		const { latitude, longitude } = response.coords;
		setLoacation({ latitude, longitude });
	};

	const errorHandler = (error) => {
		console.log(error);
	};

	return (
		<>
			{location && (
				<Map 
                  center={{ lat: location.latitude, lng: location.longitude }} 
                  style={{ width: '800px', height: '600px' }} 
                  level={3}
                >
					<MapMarker position={{ lat: location.latitude, lng: location.longitude }} />
				</Map>
			)}
		</>
	);
};

*임의의 좌표입니다

현재 위치 좌표값 얻기

useRef()를 사용해 Map 객체를 저장하고, ref 객체의 current 값에 접근해 해당 Map 객체의 중심 좌표를 얻을 수 있다.

import React, { useState, useRef } from 'react';
import { Map, MapMarker } from 'react-kakao-maps-sdk';

const App = () => {
	const [coordinates, setCoordinates] = useState(null); // 현재 위치의 좌표값을 저장할 상태
	const mapRef = useRef();

	const getCoordinates = () => {
		const map = mapRef.current;

		setCoordinates({
			center: {
				lat: map.getCenter().getLat(),
				lng: map.getCenter().getLng(),
			},
		});
	};

	return (
		<>
			<Map 
              center={{ lat: 37.5566803113882, lng: 126.904501286522 }} 
              style={{ width: '800px', height: '600px' }} 
              level={3} 
              ref={mapRef}
            >
				<MapMarker position={{ lat: 37.5566803113882, lng: 126.904501286522 }} />
				<button onClick={getCoordinates}>현재 위치 좌표 얻기</button>
			</Map>

			{coordinates && (
				<div>
					현재 위치의 좌표는..
					<p>위도 : {coordinates.center.lat}</p>
					<p>경도 : {coordinates.center.lng}</p>
				</div>
			)}
		</>
	);
};

좌표값으로 주소 얻기

`<script>` 태그에 라이브러리 추가

<script> 태그에 &libraries=services를 추가한다.

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

`const { kakao } = window;` 추가

React에서 Kakao Maps API를 사용하려면 window.kakao로 사용해야 하는데,
위의 코드를 추가해주면 일일히 window.를 붙이지 않아도 된다.

import React, { useState } from 'react';
import { Map, MapMarker } from 'react-kakao-maps-sdk';

const App = () => {
	const { kakao } = window;
	const [address, setAddress] = useState(null); // 현재 좌표의 주소를 저장할 상태

	const getAddress = (lat, lng) => {
		const geocoder = new kakao.maps.services.Geocoder(); // 좌표 -> 주소로 변환해주는 객체
		const coord = new kakao.maps.LatLng(37.5566803113882, 126.904501286522); // 주소로 변환할 좌표 입력
		const callback = function (result, status) {
			if (status === kakao.maps.services.Status.OK) {
				setAddress(result[0].address);
			}
		};
		geocoder.coord2Address(coord.getLng(), coord.getLat(), callback);
	};

	return (
		<>
			<Map center={{ lat: 37.5566803113882, lng: 126.904501286522 }} style={{ width: '800px', height: '600px' }} level={3}>
				<MapMarker position={{ lat: 37.5566803113882, lng: 126.904501286522 }} />
				<button onClick={getAddress}>현재 좌표의 주소 얻기</button>
			</Map>

			{address && (
				<div>
					현재 좌표의 주소는..
					<p>address_name: {address.address_name}</p>
					<p>region_1depth_name: {address.region_1depth_name}</p>
					<p>region_2depth_name: {address.region_2depth_name}</p>
					<p>region_3depth_name: {address.region_3depth_name}</p>
				</div>
			)}
		</>
	);
};