산불 추적기 앱을 빌드하여 지도를 렌더링하는 방법 알아보기 - 2부

이것은 산불 추적기 앱 시리즈를 구축하여 지도를 렌더링하는 방법 알아보기의 2부입니다. 1편을 놓치셨다면 읽으셔도 됩니다

또한 전체 소스 코드는 here입니다.

첫 번째 부분에서 전단지를 사용하여 간단한 지도를 렌더링했습니다. 이제 이 지도에 일부 데이터(산불 데이터)를 표시합니다. 우리는 이것을 사용할 것입니다 NASA API .
이것은 키가 필요하지 않은 오픈 소스 API입니다. 멋진 API에 대한 정보에서 체크아웃NASA website할 수 있습니다.

이제 API에서 데이터를 가져오겠습니다. http 요청을 만드는 방법/패키지는 많지만 최신 브라우저에서 직접 사용할 수 있는 가져오기를 사용하겠습니다.
두 가지 일반적인 React 후크 useState 및 useEffect를 사용하여 API 요청을 만들고 응답 데이터를 설정합니다.

src 디렉터리 내의 app.js 파일에 다음 코드를 추가합니다.

   const [eventData, setEventData] = useState([])
   const [loading, setLoading] = useState(false)
   useEffect(()=>{
      const fetchEvents = async () =>{
         setLoading(true)
         const {events} = await (await 
  fetch('https://eonet.sci.gsfc.nasa.gov/api/v2.1/events')).json()
         setEventData(events)
         setLoading(false)
       }
       fetchEvents()
    }, [])

이것은 API를 호출하고 상태를 설정하는 간단한 반응 항목이며 이해하기 어렵다면 react docs을 읽고 여기에서 다시 돌아올 것을 권장합니다!

이제 이전 게시물의 Map 구성 요소를 수정하여 eventData를 소품으로 사용하고 API가 응답을 반환하고 상태가 설정될 때까지 로더를 표시합니다.

이것은 우리의 app.js가 지금과 같이 보일 것입니다.

   import Map from "./components/Map";
   import "./App.css";
   import { useState, useEffect } from "react";
   import Header from './components/Header';
   import Loader from './components/Loader';

  function App() {
    const [eventData, setEventData] = useState([])
    const [loading, setLoading] = useState(false)
    useEffect(()=>{
    const fetchEvents = async () =>{
       setLoading(true)
       const {events} = await (await 
  fetch('https://eonet.sci.gsfc.nasa.gov/api/v2.1/events')).json()
       setEventData(events)
       setLoading(false)
       }
      fetchEvents()
    }, [])

   return (
     <div>
       <Header />
       { !loading ? <Map eventData={eventData} /> : <Loader /> }
     </div>
   );
 }

 export default App;

Tip : const {events} = await (await fetch('https://eonet.sci.gsfc.nasa.gov/api/v2.1/events')).json()
This is called object destructing, more details.

그리고 이것은 우리의 간단한 로더 구성 요소입니다. source code에서 해당 gif 파일을 얻을 수 있습니다.

  import fireLoader from './fireLoader.gif'

   const Loader = () => {
      return (
          <div className="loader">
             <img src={fireLoader} alt='fireLoader'/>
              <h2>Loading ...</h2>
          </div>
      )
   }

   export default Loader;

좋습니다. 이제 응답을 살펴보겠습니다. 폭풍, 산불, 사이클론 등과 같은 다양한 자연 현상에 대한 정보를 포함하는 이벤트 배열이 있음을 알 수 있습니다.
그러나 카테고리 객체 내에서 id가 8인 이벤트 배열의 산불 좌표만 필요합니다.
따라서 카테고리 객체 내에서 ID가 8인 모든 객체를 필터링해야 합니다.



이제 map 구성 요소를 약간 업데이트하여 eventData 소품을 사용하고 다음 코드를 Map 구성 요소에 추가해 보겠습니다.

   // define constants
   const NATURAL_EVENT_WILDFIRE = 8;

     const Map = ({ center, zoom, eventData }) => {
     const markers = eventData.map((event, key) => {
        if (event.categories[0].id === NATURAL_EVENT_WILDFIRE) {
          const [lng, lat] = event.geometries[0].coordinates;
       return (
         <LocationMarker key={key} lng={lng} lat={lat} info= 
          {event.title} />
         );
        }
     });

알 수 있듯이 우리는 eventData 배열을 반복하고 id가 8인 개체를 찾고 경도 및 위도 배열과 이벤트 제목을 가져와 마커를 클릭할 때 산불에 대한 정보를 표시합니다.
이제 모든 위치 마커의 배열인 markers 배열을 렌더링합니다. 이제 지도 구성요소의 전체 코드입니다.

   import React from "react";
   import { MapContainer, TileLayer } from "react-leaflet";
   import LocationMarker from "./LocationMarker";

   // define constants
   const NATURAL_EVENT_WILDFIRE = 8;

   const Map = ({ center, zoom, eventData }) => {
      const markers = eventData.map((event, key) => {
       if (event.categories[0].id === NATURAL_EVENT_WILDFIRE) {
          const [lng, lat] = event.geometries[0].coordinates;
        return (
         <LocationMarker key={key} lng={lng} lat={lat} info= 
          {event.title} />
        );
      }
    });

    return (
       <MapContainer style={{ height: "100vh" }} center={center} 
           zoom={zoom}>
          <TileLayer
            attribution='&copy; <a 
             href="http://osm.org/copyright">OpenStreetMap</a> 
             contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
        {markers}
      </MapContainer>
    );
   };

   Map.defaultProps = {
      center: [42.3265, -122.8756],
      zoom: 6,
   };

   export default Map;

이것이 우리 앱이 준비한 것입니다. 다음을 사용하여 앱 시작
yarn start


전단지로 할 수 있는 일이 너무 많고, 타일을 변경하고, 내비게이션 등을 제공할 수 있으며 가장 좋은 점은 오픈 소스라는 것입니다. 가능성은 무한합니다.

이 시리즈가 마음에 드셨기를 바라며 마음에 드셨다면 공유하고 저를 팔로우해주세요.

코로나 없는 새해 복 많이 받으세요!