[react] 지도에서 종교 시설 정보 표시하기
React 애플리케이션에서 지도를 표시하고, 해당 지도에 있는 종교 시설들의 정보를 표시하는 기능을 구현하는 방법을 알아보겠습니다.
요구사항
- 지도를 표시하기 위해 react-leaflet 라이브러리를 사용합니다.
- 종교 시설의 위치와 정보를 표시하기 위해 API를 사용합니다.
react-leaflet 설치
먼저, react-leaflet을 설치해야 합니다.
npm install react-leaflet leaflet
지도 컴포넌트 구현
다음으로, 지도를 표시하는 기능을 구현합니다. react-leaflet 라이브러리를 사용하여 지도를 렌더링하고, 사용자의 위치를 표시하는 기능을 추가합니다.
import React from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
function MapComponent({ center, zoom, markers }) {
return (
<MapContainer center={center} zoom={zoom}>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{markers.map(marker => (
<Marker position={[marker.lat, marker.lng]}>
<Popup>
{marker.name}
</Popup>
</Marker>
))}
</MapContainer>
);
}
export default MapComponent;
API를 통한 종교 시설 정보 표시
마지막으로, API를 호출하여 종교 시설의 위치와 정보를 가져와 지도에 표시합니다.
import React, { useState, useEffect } from 'react';
import MapComponent from './MapComponent';
function ReligiousPlacesMap() {
const [markers, setMarkers] = useState([]);
useEffect(() => {
// API를 호출하여 종교 시설 정보를 가져옵니다.
fetch('https://api.example.com/religious-places')
.then(response => response.json())
.then(data => setMarkers(data));
}, []);
return (
<div>
<h1>Religious Places Map</h1>
<MapComponent center={[37.5665, 126.9780]} zoom={13} markers={markers} />
</div>
);
}
export default ReligiousPlacesMap;
이제 종교 시설 정보가 표시된 지도를 확인할 수 있습니다. 위 예제를 참고하여 React와 react-leaflet을 사용하여 지도에 종교 시설 정보를 표시하는 기능을 구현해 보세요.