[react] 지도에서 행사장 정보 표시하기

22 Dec 2023

react

React 애플리케이션에서 지도를 사용하여 행사장의 정보를 표시하는 방법에 대해 알아보겠습니다.

지도 라이브러리 선택

지도를 표시하기 위해 React에서는 일반적으로 react-leaflet을 사용합니다. 이 라이브러리는 Leaflet.js를 React 애플리케이션에 통합할 수 있는 편리한 방법을 제공합니다.

npm install react-leaflet leaflet

지도 컴포넌트 생성

먼저, 지도를 표시할 컴포넌트를 생성합니다.

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

function EventMap({ eventLocation }) {
  const { lat, lng, name } = eventLocation;

  return (
    <MapContainer center={[lat, lng]} zoom={13} style={{ height: '400px', width: '100%' }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <Marker position={[lat, lng]}>
        <Popup>{name}</Popup>
      </Marker>
    </MapContainer>
  );
}

export default EventMap;

위 코드에서 eventLocation은 행사장의 위치 정보를 포함하는 객체입니다. 해당 위치 정보를 사용하여 지도의 중심을 설정하고, 해당 위치에 마커와 팝업을 표시합니다.

행사 정보와 연동

이제 이 EventMap 컴포넌트를 행사 정보 컴포넌트와 연동하여 사용할 수 있습니다.

import React from 'react';
import EventMap from './EventMap';

function EventDetails({ eventData }) {
  const { location } = eventData;

  return (
    <div>
      <h2>{eventData.title}</h2>
      <p>{eventData.description}</p>
      <EventMap eventLocation={location} />
    </div>
  );
}

export default EventDetails;

위 코드에서 eventData는 행사 정보를 포함하는 객체로, location 속성에는 위도, 경도 및 행사장 이름과 같은 정보가 포함됩니다.

결론

이제 React 애플리케이션 내에서 react-leaflet을 사용하여 지도를 표시하고, 행사장의 정보를 마커와 팝업을 통해 시각적으로 표현하는 방법에 대해 알아보았습니다. 지도를 통해 행사장의 위치 정보를 사용자에게 시각적으로 제공할 수 있으며, 사용자들은 행사장의 위치를 쉽게 확인할 수 있습니다.

Reference: