Valtio와 반응: Leaflet.js를 사용한 지리적 위치 API

계속해서 이 라이브러리를 사용하여 현재 위치를 중심으로 지도를 렌더링하는 React 구성 요소의 코드를 단순화합니다(위 스니펫이 작동하려면 지리적 위치를 활성화해야 함).

지리적 위치 APIdescribes how to get the current location . 이것은 비동기 호출이므로 종속성과 함께 useEffect를 사용합니다. 설정하기가 약간 까다롭습니다. Valtio 라이브러리를 사용하면 비동기 콜백에 proxy , useSnapshot 및 derive 만 사용하면 됩니다.

스토어와 비동기 콜백

"defaultPos"및 "current"라는 두 개의 필드가 있는 매장을 선언한 다음proxy geolocation API에서 "current"필드를 선언합니다derive.

import { proxy } from 'valtio';
import { derive } from 'valtio/utils';

const defaultPos = { lat: 42.2808, lng: -83.743 };

export const gps = proxy({
  initPos: defaultPos,
  current: null,
});

derive({
  derPos: async (get) => {
    if (!navigator.geolocation) return (get(gps).initPos = defaultPos);

    navigator.geolocation.getCurrentPosition(success, fail);
    function fail(e) { return e }
    function success({ coords: { latitude, longitude } }) {
      get(gps).current = { lat: latitude, lng: longitude };
    }
  },
});

<App /> 컴포넌트

React가 위치를 얻었을 때 렌더링하기 위해 우리는 단순히 useSnapshot로 상점의 원하는 필드를 스냅합니다. 또한 비동기 렌더링이므로 일시 중단해야 합니다.

import Map from './map';
import React from 'react';
import { useSnapshot } from 'valtio';

import { gps } from './geolocate';

function App() {
  const { current } = useSnapshot(gps);

  return (
    <React.Suspense fallback={<h1>Loading</h1>}>
    <div>
      {current && <Map coord={current} />}
    </div>
    </React.Suspense>

  );
}

export default App;

<Map /> 컴포넌트

특히 useRef 로 DOM 구성 요소를 추적해야 하는 경우 Valtio 라이브러리가 명백한 이점을 제공하지 않을 수 있으므로 기존 React 코드를 사용합니다.

import React from "react";
import "./styles.css";
import { MapContainer, TileLayer } from "react-leaflet";
export function Map({ coord: { lat, lng } }) {
  return (
    <MapContainer center={[lat, lng]} zoom={4} class="leaflet-container">
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
    </MapContainer>
  );
}