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

22 Dec 2023

react

React를 사용하여 웹 애플리케이션에서 지도 상에 교육시설 정보를 표시하는 것은 유용한 기능입니다. 이를 위해서는 React에서 지도 라이브러리를 결합하고, 교육시설 데이터를 불러와서 표시해야 합니다. 이번 게시물에서는 이에 대한 기본적인 접근 방법에 대해 알아보겠습니다.

지도 라이브러리 선택하기

React에서는 여러 지도 라이브러리를 활용할 수 있습니다. 대표적으로 React-Leaflet과 Google Maps React가 있습니다. 각 라이브러리는 각자의 장단점을 가지고 있으므로, 프로젝트 요구 사항에 맞게 적절한 라이브러리를 선택해야 합니다.

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

function MapComponent() {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '100vh' }}>
      <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>
  );
}

위 코드는 React-Leaflet을 사용하여 기본 지도를 표시하는 예시입니다.

교육시설 데이터 연동하기

교육시설 데이터를 얻기 위해 외부 API를 호출하거나, 미리 가공된 데이터를 가져와서 지도상에 표시할 수 있습니다. 아래는 React에서 외부 API를 호출하여 교육시설 데이터를 가져와 표시하는 예시입니다.

import React, { useEffect, useState } from 'react';

function EducationFacilityMap() {
  const [educationFacilities, setEducationFacilities] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/education-facilities')
      .then(response => response.json())
      .then(data => setEducationFacilities(data));
  }, []);

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

위의 코드는 외부 API를 호출하여 교육시설 데이터를 가져와 지도상에 표시하는 예시입니다.

마치며

React를 사용하여 지도에서 교육시설 정보를 표시하는 것은 매우 유용합니다. 이를 통해 사용자는 근처의 교육시설에 대한 정보를 쉽게 확인할 수 있습니다. 적절한 지도 라이브러리와 데이터를 연동하여 웹 애플리케이션에 지도 기능을 추가해 보세요.

참고문헌: