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

22 Dec 2023

react

React를 사용하여 지도에서 예술 시설 정보를 표시하는 웹 애플리케이션을 개발하는 방법에 대해 소개하겠습니다. 이를 위해 React와 함께 Mapbox와 React-Map-GL 라이브러리를 사용할 것입니다.

요구사항

Mapbox 계정 등록
React 개발 환경 구축
React-Map-GL 라이브러리 설치

지도 초기화

먼저, Mapbox에서 API 토큰을 발급받고 React-Map-GL을 사용하여 지도를 초기화합니다.

import React, { useState } from 'react';
import ReactMapGL from 'react-map-gl';

function MapComponent() {
  const [viewport, setViewport] = useState({
    latitude: 37.7749,
    longitude: -122.4194,
    zoom: 10,
    width: '100%',
    height: '100%',
    mapboxApiAccessToken: 'YOUR_MAPBOX_API_TOKEN'
  });

  return (
    <div>
      <ReactMapGL
        {...viewport}
        onViewportChange={newViewport => setViewport(newViewport)}
      />
    </div>
  );
}

export default MapComponent;

예술 시설 데이터 가져오기

다음으로, 예술 시설에 대한 데이터를 가져와 지도에 표시합니다. 이를 위해 API를 호출하고 가져온 데이터를 지도 위에 마커로 표시합니다.

import React, { useState, useEffect } from 'react';
import ReactMapGL, { Marker } from 'react-map-gl';

function MapComponent() {
  const [artFacilities, setArtFacilities] = useState([]);

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

  // ...

  return (
    <div>
      <ReactMapGL {...viewport} onViewportChange={newViewport => setViewport(newViewport)}>
        {artFacilities.map(facility => (
          <Marker key={facility.id} latitude={facility.latitude} longitude={facility.longitude}>
            <div>마커</div>
          </Marker>
        ))}
      </ReactMapGL>
    </div>
  );
}

export default MapComponent;

마무리

이제 React를 사용하여 지도에서 예술 시설 정보를 표시하는 방법에 대해 알아보았습니다. Mapbox와 React-Map-GL을 이용하여 지도를 초기화하고 예술 시설 데이터를 가져와 지도에 표시하는 웹 애플리케이션을 만들 수 있습니다.

더 많은 기능을 추가하고 사용자 경험을 향상시키기 위해 추가적인 개발을 진행할 수 있습니다.

요구사항

지도 초기화

예술 시설 데이터 가져오기

마무리

참고 자료