[react] 지도에서 정부 시설 정보 표시하기

22 Dec 2023

react

React를 사용하여 지도에서 정부 시설 정보를 표시하는 기능은 매우 유용합니다. 사용자는 주변의 정부 시설에 대한 정보를 쉽게 확인할 수 있고, 지역사회와 관련된 필요한 서비스 및 시설에 대한 접근성을 높일 수 있습니다.

이 예제에서는 React와 함께 react-leaflet 라이브러리를 사용하여 지도에서 정부 시설 정보를 표시하는 방법을 살펴보겠습니다.

프로젝트 설정

먼저 React 프로젝트를 생성하고, react-leaflet 라이브러리를 설치합니다.

npx create-react-app government-facilities-map
cd government-facilities-map
npm install leaflet react-leaflet

지도 컴포넌트 생성

지도를 표시하기 위한 컴포넌트를 생성합니다.

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

const GovernmentFacilitiesMap = () => {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '500px', width: '100%' }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      {/* 정부 시설 마커 표시 */}
    </MapContainer>
  );
}

export default GovernmentFacilitiesMap;

정부 시설 데이터 가져오기

이제 정부 시설 데이터를 가져와서 지도에 마커로 표시합니다. 실제로는 백엔드 서비스에서 데이터를 가져와야 하지만, 여기서는 가짜 데이터를 사용하여 예시를 보여드리겠습니다.

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

const GovernmentFacilitiesMap = () => {
  const [facilities, setFacilities] = useState([]);

  useEffect(() => {
    // 여기서 백엔드에서 정부 시설 데이터를 가져오는 API 호출
    // 데이터를 가져와서 setFacilities로 상태 업데이트
  }, []);

  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '500px', width: '100%' }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      {facilities.map(facility => (
        <Marker position={[facility.lat, facility.lng]} key={facility.id}>
          <Popup>
            {facility.name}<br />
            {facility.address}
          </Popup>
        </Marker>
      ))}
    </MapContainer>
  );
}

export default GovernmentFacilitiesMap;

마치며

이제 React와 react-leaflet을 사용하여 지도에서 정부 시설 정보를 표시하는 방법에 대해 알아보았습니다. 사용자들은 이를 통해 필요한 정부 시설에 대한 정보를 빠르고 쉽게 얻을 수 있게 될 것입니다.

위 예제는 실제 API 호출이나 데이터베이스와의 상호작용은 포함하고 있지 않습니다. 실제 애플리케이션을 작성할 때는 이에 대한 고려가 필요합니다.

참고 자료

이제 지도에서 정부 시설 정보를 표시하는 React 애플리케이션을 만들 준비가 되었습니다. 즐거운 코딩되세요!

목차

프로젝트 설정

지도 컴포넌트 생성

정부 시설 데이터 가져오기

마치며

참고 자료