[react] 지도 관련 라이브러리 사용하기

22 Dec 2023

react

React를 사용하여 웹 애플리케이션을 개발할 때, 지도와 위치 기반 기능을 구현해야 하는 경우가 많습니다. 이러한 기능을 구현하기 위해서는 지도 관련 라이브러리를 사용해야 합니다. 본 블로그 포스트에서는 React 애플리케이션에서 지도를 표시하고 상호작용하는 방법에 대해 설명합니다.

1. React에서 지도 표시하기

React 애플리케이션에서 지도를 표시하기 위해서는 지도 관련 라이브러리를 사용해야 합니다. react-leaflet은 Leaflet 지도 라이브러리를 React 애플리케이션과 통합할 수 있는 편리한 방법을 제공합니다.

다음은 react-leaflet을 사용하여 React 애플리케이션에 지도를 표시하는 간단한 예제 코드입니다.

import React from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

function App() {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '400px' }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={[51.505, -0.09]}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  );
}

export default App;

위 코드에서 MapContainer 컴포넌트를 사용하여 지도를 초기화하고, TileLayer 컴포넌트를 사용하여 타일 지도 레이어를 추가하고, Marker와 Popup 컴포넌트를 사용하여 마커와 팝업을 추가합니다.

2. 지도 관련 상호작용 구현하기

지도를 표시하는 것 외에도 사용자와의 상호작용을 위해 지도 관련 라이브러리에서 제공하는 다양한 기능을 활용할 수 있습니다. 예를 들어, 사용자의 현재 위치를 표시하거나 지도 위에 이벤트를 추가하는 등의 작업을 할 수 있습니다.

import React from 'react';
import { MapContainer, TileLayer, useMapEvents } from 'react-leaflet';

function LocationMarker() {
  const map = useMapEvents({
    click(e) {
      map.flyTo(e.latlng, map.getZoom());
    }
  });

  return null;
}

function App() {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '400px' }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <LocationMarker />
    </MapContainer>
  );
}

export default App;

위 코드는 react-leaflet에서 제공하는 useMapEvents 훅을 사용하여 지도 클릭 시 해당 위치로 이동하는 상호작용을 추가한 예제입니다.

결론

React 애플리케이션에서 지도와 관련된 기능을 구현하기 위해서는 react-leaflet과 같은 라이브러리를 사용할 수 있습니다. 이를 통해 지도를 표시하고 상호작용하는 기능을 쉽게 구현할 수 있습니다. 필요에 따라 다양한 옵션을 사용하여 지도 기반 기능을 원하는 대로 구현할 수 있습니다.

지도 관련 라이브러리에 대한 자세한 내용은 react-leaflet 공식 문서를 참고하시기 바랍니다.