[react] 지도에서 이벤트 정보 표시하기

22 Dec 2023

react

React를 사용하여 지도에 이벤트 정보를 표시하는 기능을 개발하는 것은 매우 흥미로운 작업입니다. 사용자들에게 지도 위에서 이벤트의 위치와 세부 정보를 시각적으로 제공할 수 있어 유용합니다. 이번 글에서는 React에서 지도에 이벤트 정보를 표시하는 방법에 대해 알아보겠습니다.

구성 요소 생성

우선, 이벤트 정보를 표시하기 위한 React 구성 요소를 생성해야 합니다. 예를 들어, EventMarker라는 이름의 구성 요소를 만들어 보겠습니다.

import React from 'react';

const EventMarker = ({ event }) => {
  return (
    <div>
      <h2>{event.title}</h2>
      <p>{event.location}</p>
      <p>{event.date}</p>
      {/* 기타 이벤트 정보 표시 */}
    </div>
  );
};

지도 라이브러리 선택

지도를 표시하기 위해서는 지도 라이브러리를 선택해야 합니다. 여러 옵션이 있지만, 이 예시에서는 react-leaflet을 사용하여 Leaflet 지도를 표시하겠습니다.

npm install react-leaflet leaflet

이벤트 정보와 마커 표시

이제, 이벤트 정보와 해당 위치의 마커를 지도에 표시해 보겠습니다.

import React from 'react';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import EventMarker from './EventMarker';

const MapWithEventMarker = ({ events }) => {
  return (
    <Map center={[51.505, -0.09]} zoom={13}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {events.map(event => (
        <Marker position={event.position}>
          <Popup>
            <EventMarker event={event} />
          </Popup>
        </Marker>
      ))}
    </Map>
  );
};

export default MapWithEventMarker;

MapWithEventMarker 구성 요소는 react-leaflet의 Map, TileLayer, Marker, Popup 구성 요소를 사용하여 이벤트 정보와 해당 위치의 마커를 지도에 표시합니다.

결론

React를 사용하여 지도에 이벤트 정보를 표시하는 방법에 대해 간략하게 살펴보았습니다. 이를 확장하여 사용자의 위치와 상호작용하는 지도 기능을 개발할 수 있습니다. 이러한 기능은 이벤트 찾기 애플리케이션과 여행 계획 애플리케이션에서 유용하게 활용될 수 있습니다.

이 글은 Leaflet을 사용한 예시를 기반으로 하였지만, 실제 프로젝트에서는 지도 라이브러리와 데이터 모델에 따라 구현 방법이 달라질 수 있습니다.

참고 문헌: