현대 웹 애플리케이션에서 지도는 사용자 경험을 크게 향상시키는 중요한 요소 중 하나입니다. 특히나 모바일 환경에서는
사용자에게 직관적이고 상호작용이 가능한 경험을 제공해야 합니다. 이 글에서는 리액트 애플리케이션에 지도에서 사용자와의
상호작용 기능을 추가하는 방법에 대해 자세히 알아보겠습니다. 또한, 터치 스크린에서 핀치 줌 기능도 구현할 예정입니다.
1. 리액트에서 지도 라이브러리 선택하기
리액트에서는 다양한 지도 라이브러리를 사용할 수 있습니다. 가장 많이 사용되는 라이브러리 중 하나는 react-leaflet입니다.
이 라이브러리는 Leaflet.js를 기반으로 하며, 쉽게 지도를 구현할 수 있도록 도와줍니다.
1.1. react-leaflet 설치하기
아래의 명령어로 react-leaflet 및 Leaflet을 설치할 수 있습니다.
npm install react-leaflet leaflet1.2. 지도 기본 설정하기
간단한 지도를 설정하려면 다음과 같은 기본 코드를 사용합니다.
jsx
import React from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
const position = [51.505, -0.09];
const MyMap = () => {
return (
여기에 있는 것은 팝업입니다!
);
};
export default MyMap;
2. 사용자 인터랙션 기능 추가하기
지도상에서 사용자와의 인터랙션을 위해 클릭, 드래그 등의 이벤트를 다루는 방법을 알아보겠습니다.
리액트에서는 useMap 훅을 통해 Map 객체에 접근할 수 있습니다.
2.1. 지도 클릭 이벤트 처리하기
사용자가 지도를 클릭했을 때 특정 작업을 수행하는 예제를 만들어보겠습니다. 클릭한 위치에 마커를 추가하는 기능을 구현합니다.
jsx
import React, { useState, useCallback } from 'react';
import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
const MyMapWithClick = () => {
const [markers, setMarkers] = useState([]);
const handleMapClick = useCallback((e) => {
const newMarker = {
position: e.latlng,
id: markers.length,
};
setMarkers((current) => [...current, newMarker]);
}, [markers]);
return (
여기가 클릭된 위치입니다!
))}
);
};
export default MyMapWithClick;
3. 터치 스크린에서의 핀치 줌 구현하기
모바일 디바이스에서 핀치 줌을 지원하려면 Leaflet의 내장 핀치 줌 기능을 활용할 수 있습니다. 하지만,
이 기능이 기본값으로 활성화되지 않을 수 있으므로, 이를 명시적으로 설정해주어야 합니다.
3.1. 핀치 줌 활성화하기
Leaflet의 기본 제공 옵션 중 touchZoom을 활성화하여 사용자가 터치 스크린에서 핀치 줌을 사용할 수 있도록 만듭니다.
jsx
import React from 'react';
import { MapContainer, TileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
const MyMapWithPinchZoom = () => {
return (
);
};
export default MyMapWithPinchZoom;
4. 사용자 경험 강화하기
사용자가 지도와 상호작용할 때의 경험을 더욱 향상시키기 위해 다양한 기능을 추가할 수 있습니다. 예를 들어,
사용자에게 현재 위치를 표시하거나, 경로 탐색 기능을 추가하는 등의 방법이 있습니다.
4.1. 사용자의 현재 위치 표시하기
사용자의 현재 위치를 가져오려면 navigator.geolocation.getCurrentPosition API를 사용할 수 있습니다.
이 기능을 통해 사용자는 자신의 현재 위치를 쉽게 확인할 수 있습니다.
jsx
import React, { useEffect, useState } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
const MyMapWithLocation = () => {
const [position, setPosition] = useState([51.505, -0.09]);
useEffect(() => {
navigator.geolocation.getCurrentPosition((pos) => {
setPosition([pos.coords.latitude, pos.coords.longitude]);
});
}, []);
return (
당신의 현재 위치입니다!
);
};
export default MyMapWithLocation;
5. 마치며
이번 글에서는 리액트 애플리케이션에 지도에서 사용자 인터랙션 기능을 추가하는 여러 가지 방법에 대해 알아보았습니다.
지도 클릭을 통한 마커 추가, 터치 스크린에서의 핀치 줌 기능 구현, 사용자의 현재 위치 표시 등의 기능이 포함되었습니다.
이러한 기능들은 모바일 사용자에게 더욱 편리하고 유용한 경험을 제공하기 위해 필수적이며, 앞으로도 이러한 기능들을 확장하여
더 나아가 사용자 맞춤형 지도 앱을 개발해보시기 바랍니다.