자주 사용하는 훅

박상은·2022년 6월 18일
0

🎁 분류 🎁

목록 보기
5/16

1. useCoords()

Geolocation API를 이용해서 위도와 경도를 얻는 훅입니다.

import { useCallback, useEffect, useState } from "react";

interface ICoordsState {
  latitude: number | null;
  longitude: number | null;
}

export default function useCoords(warningText: string) {
  const [coords, setCoords] = useState<ICoordsState>({
    latitude: null,
    longitude: null,
  });

  // 위치 허용 시 실행
  const onSuccess = useCallback(
    ({ coords: { latitude, longitude } }: GeolocationPosition) =>
      setCoords({ latitude, longitude }),
    []
  );
  
  // 위치 미허용 시 실행
  const onFailure = useCallback(
    (error: GeolocationPositionError) => alert(warningText, " >> ", error),
    [warningText]
  );

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(onSuccess, onFailure);
  }, [onSuccess, onFailure]);

  return coords;
}

0개의 댓글