지도에 마커 추가 및 사용자 위치 표시하기, 사용자 위치 요청 및 위치 권한 처리

본 문서에서는 리액트 애플리케이션에서 지도에 마커를 추가하고, 사용자의 현재 위치를 표시하는 방법에 대해 자세히 설명합니다. 이 강좌는 기본적인 리액트 지식이 있는 개발자를 대상으로 하며, 지도 API와 위치 권한 처리에 대한 이해를 돕기 위해 단계별로 설명합니다.

1. 환경 설정

본 예제를 위해서는 먼저 리액트 프로젝트를 설정해야 합니다. create-react-app을 사용하여 새 프로젝트를 시작할 수 있습니다.

npx create-react-app my-map-app
cd my-map-app

2. 필요한 라이브러리 설치

지도와 위치 관련 기능을 사용하기 위해 필요한 라이브러리를 설치합니다. 예를 들어, Google Maps API 또는 Leaflet을 사용할 수 있습니다. 여기서는 React-Leaflet 라이브러리를 사용하여 Leaflet 기반의 지도를 구현합니다.

npm install react-leaflet leaflet

리액트에서 Leaflet을 사용할 때는 지도를 렌더링하기 위해 CSS 파일도 포함해야 합니다.

npm install leaflet@1.7.3

3. 지도 컴포넌트 설정하기

이제 지도를 표시할 컴포넌트를 생성합니다. src 디렉토리에 Map.js 파일을 생성하고, 다음 코드를 작성합니다.

import React, { useEffect, useState } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';

const Map = () => {
    const [position, setPosition] = useState([37.5665, 126.978]);

    useEffect(() => {
        // 기본 마커 아이콘 설정
        const DefaultIcon = L.icon({
            iconUrl: 'https://unpkg.com/leaflet/dist/images/marker-icon.png',
            iconSize: [25, 41],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34],
            shadowSize: [41, 41]
        });
        L.Marker.prototype.options.icon = DefaultIcon;
    }, []);

    return (
        
            
            
                
                    당신은 여기 있습니다!
                
            
        
    );
};

export default Map;

4. 사용자 위치 요청하기

사용자의 현재 위치를 요청하고 이를 지도에 표시하기 위해 navigator.geolocation API를 사용합니다. 사용자의 위치를 요청하고 성공적으로 위치를 받아오면 해당 위치에 마커를 추가합니다.

const Map = () => {
    const [position, setPosition] = useState([37.5665, 126.978]);
    const [userPosition, setUserPosition] = useState(null);

    useEffect(() => {
        // 사용자의 위치 요청
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    setUserPosition([position.coords.latitude, position.coords.longitude]);
                    setPosition([position.coords.latitude, position.coords.longitude]);
                },
                (error) => {
                    console.error("위치 권한을 허용하지 않거나 오류가 발생했습니다.", error);
                }
            );
        }
    }, []);

    // 기본 마커 아이콘 설정
    useEffect(() => {
        const DefaultIcon = L.icon({
            iconUrl: 'https://unpkg.com/leaflet/dist/images/marker-icon.png',
            iconSize: [25, 41],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34],
            shadowSize: [41, 41]
        });
        L.Marker.prototype.options.icon = DefaultIcon;
    }, []);

    return (
        
            
            
                
                    당신은 여기 있습니다!
                
            
            {userPosition && (
                
                    
                        당신의 현재 위치입니다!
                    
                
            )}
        
    );
};

5. 위치 권한 처리

위치 요청을 할 때 사용자가 권한을 허용하지 않거나, 오류가 발생할 경우를 대비해 오류 처리를 해야 합니다. 위의 코드에서 이미 위치 요청의 오류 처리를 포함했지만, 사용자에게 위치 권한을 요청하기 전에 위치 사용에 대한 정보 제공이 중요합니다.

예를 들어, 사용자가 위치 권한을 허용하지 않는 경우 사용자에게 알림을 띄우고 권한 요청을 설명하는 것도 좋은 방법입니다.

6. 최종 코드

위에서 언급한 내용들을 바탕으로 최종 코드를 작성해보겠습니다. 아래는 사용자 위치를 받고, 마커를 지도에 표시하는 전체 코드입니다.

import React, { useEffect, useState } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';

const Map = () => {
    const [position, setPosition] = useState([37.5665, 126.978]);
    const [userPosition, setUserPosition] = useState(null);

    useEffect(() => {
        // 사용자 위치 요청
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    setUserPosition([position.coords.latitude, position.coords.longitude]);
                    setPosition([position.coords.latitude, position.coords.longitude]);
                },
                (error) => {
                    console.error("위치 권한을 허용하지 않거나 오류가 발생했습니다.", error);
                }
            );
        }
    }, []);

    // 기본 마커 아이콘 설정
    useEffect(() => {
        const DefaultIcon = L.icon({
            iconUrl: 'https://unpkg.com/leaflet/dist/images/marker-icon.png',
            iconSize: [25, 41],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34],
            shadowSize: [41, 41]
        });
        L.Marker.prototype.options.icon = DefaultIcon;
    }, []);

    return (
        
            
            
                
                    당신은 여기 있습니다!
                
            
            {userPosition && (
                
                    
                        당신의 현재 위치입니다!
                    
                
            )}
        
    );
};

export default Map;

7. 결론

이번 강좌를 통해 리액트 애플리케이션에서 지도에 마커를 추가하고 사용자의 현재 위치를 표시하는 방법을 배우았습니다. 이 기능은 다양한 응용 프로그램에서 매우 유용하며, 사용자 경험을 크게 향상시킬 수 있습니다.

더 나아가, 지도 API의 다양한 기능을 활용하여 더욱 풍부한 사용자 경험을 제공할 수 있습니다. 예를 들어, 사용자 검색 기능, 드래그 앤 드롭 마커 이동, 경로 안내 등의 기능을 추가하여 응용프로그램을 확장할 수 있습니다.