[react] 지도에서 병원 및 의료시설 정보 표시하기

22 Dec 2023

react

React 애플리케이션에서 지도에 병원 및 의료시설 정보를 표시하고 싶다면, React와 함께 지도 API 및 병원 데이터 API를 활용하여 구현할 수 있습니다. 이를 위해 다음의 단계를 따를 수 있습니다.

1. 지도 API 선택 및 연동

우선, React에서 사용할 지도 API를 선택하고 해당 API를 React 애플리케이션에 연동해야 합니다. 대표적인 지도 API로는 Google Maps API, Mapbox API, Kakao 지도 API 등이 있습니다. 선택한 API의 공식 문서를 참고하여 React 애플리케이션과 해당 API를 연동하는 방법을 학습하고 적용합니다.

// 예시: Mapbox 지도 연동
import React from 'react';
import mapboxgl from 'mapbox-gl';

mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

class MapComponent extends React.Component {
  constructor(props) {
    super(props);
    this.mapContainer = React.createRef();
  }

  componentDidMount() {
    this.map = new mapboxgl.Map({
      container: this.mapContainer.current,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [YOUR_LONGITUDE, YOUR_LATITUDE],
      zoom: 12
    });
  }

  componentWillUnmount() {
    this.map.remove();
  }

  render() {
    return <div ref={this.mapContainer} className="map-container" />;
  }
}

export default MapComponent;

2. 병원 및 의료시설 데이터 가져오기

다음으로, 해당 지도 상에 표시할 병원 및 의료시설 데이터를 가져와야 합니다. 이를 위해 공공 또는 제3자에서 제공하는 병원 정보 API를 활용하거나, 직접 데이터베이스에 저장된 정보를 활용할 수 있습니다. 예를 들어, 병원 목록을 JSON 형식으로 가져오는 방법은 다음과 같습니다.

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

const HospitalMap = () => {
  const [hospitals, setHospitals] = useState([]);

  useEffect(() => {
    axios.get('https://your-hospital-data-api.com/hospitals')
      .then(response => {
        setHospitals(response.data);
      })
      .catch(error => {
        console.error('Error fetching hospital data: ', error);
      });
  }, []);

  return (
    // 지도에 병원 위치를 표시하는 로직 추가
  );
};

export default HospitalMap;

3. 지도에 병원 정보 표시

마지막으로, React와 선택한 지도 API를 이용하여 가져온 병원 및 의료시설 데이터를 지도 상에 표시합니다. 이때, 마커, 클러스터링, 정보 창 등과 같은 기능을 활용하여 사용자가 병원 정보를 쉽게 확인할 수 있도록 할 수 있습니다.

import React from 'react';
import { Marker } from 'react-map-gl';

const HospitalMap = ({ hospitals }) => {
  return (
    <MapComponent>
      {hospitals.map(hospital => (
        <Marker key={hospital.id} latitude={hospital.latitude} longitude={hospital.longitude}>
          <button>{hospital.name}</button>
        </Marker>
        // 병원 클릭 시 정보 창 및 상세 정보 표시하는 로직 추가
      ))}
    </MapComponent>
  );
};

export default HospitalMap;

위의 단계를 따라 React 애플리케이션에서 지도에 병원 및 의료시설 정보를 표시할 수 있습니다. 필요에 따라 추가적인 기능을 활용하여 사용자 경험을 향상시킬 수 있으며, 공공 데이터 API를 활용하면 실제 병원 정보를 동적으로 표시할 수 있습니다.

1. 지도 API 선택 및 연동

2. 병원 및 의료시설 데이터 가져오기

3. 지도에 병원 정보 표시

참고 자료