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

22 Dec 2023

react

React를 사용하여 웹 애플리케이션을 개발할 때, 지도에서 도서관 정보를 표시하는 기능을 구현하는 것은 매우 중요합니다. 이를 통해 사용자들은 주변 도서관의 위치 및 정보를 쉽게 확인할 수 있습니다. React와 함께 지도 API를 통해 도서관 정보를 표시하는 방법을 알아보겠습니다.

목표

지도 API를 통해 지도를 표시한다.
도서관 위치 정보를 가져와 지도에 마커로 표시한다.
마커를 클릭하면 도서관의 세부 정보를 표시한다.

지도 API 사용하기

우선, Google Maps API 또는 Mapbox API와 같은 지도 API를 사용하여 지도를 웹 페이지에 표시합니다. 여기서는 Google Maps API를 사용하는 것으로 가정하고 진행하겠습니다.

import React, { useEffect } from 'react';

const Map = () => {
  useEffect(() => {
    // Google Maps API를 사용하여 지도를 표시하는 로직
  }, []);

  return (
    <div id="map"></div>
  );
};

export default Map;

도서관 위치 정보 가져오기

도서관의 위치 정보를 가져오기 위해 공공 데이터나 서드 파티 API를 활용할 수 있습니다. 공공 데이터 포털에서 제공하는 도서관 정보 API를 사용하여 데이터를 가져올 수 있습니다.

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

const LibraryMap = () => {
  const [libraries, setLibraries] = useState([]);

  useEffect(() => {
    // 도서관 위치 정보를 가져와 state에 저장하는 로직
  }, []);

  return (
    <>
      <Map />
      {/* 마커로 도서관 위치 표시 */}
      {libraries.map(library => (
        <Marker key={library.id} position={[library.latitude, library.longitude]} onClick={() => handleMarkerClick(library)} />
      ))}
    </>
  );
};

export default LibraryMap;

마커 클릭 시 도서관 정보 표시하기

마커를 클릭했을 때 해당 도서관의 세부 정보를 표시할 수 있도록 합니다.

const handleMarkerClick = library => {
  // 선택한 도서관의 세부 정보를 표시하는 로직
};

이제 React를 사용하여 지도에서 도서관 정보를 표시하는 기능을 구현할 수 있게 되었습니다. 사용자는 지도를 통해 도서관의 위치를 확인하고, 마커를 클릭하여 도서관의 세부 정보를 쉽게 얻을 수 있습니다.