[React] Geolocation API 사용하여 현재 내 위치 찾기 (with. TypeScript)

Geolocation API는 사용자의 위치 정보(위도, 경도)를 제공해준다. HTML에서 자체적으로 제공하는 API이다.

Geolocation은 npm으로 설치해서 사용할 수도 있다.
📎 react-hook-geolocation

하지만 Hook을 직접 구현해서 사용하는 것도 그리 복잡하지 않다. 리액트에서 Geolocation을 사용할 수 있도록 Hook을 구현하고 사용하는 방법에 대해 정리해보고자 한다.

useGeolocation Hook 구현하기

📌 Geolocation.getCurrentPosition() 메서드 기본 구문
navigator.geolocation.getCurrentPosition(success, error, [options])

(useGeolocation.tsx)

import { useState, useEffect } from 'react';

interface locationType {
  loaded: boolean;
  coordinates?: { lat: number; lng: number };
  error?: { code: number; message: string };
}

const useGeolocation = () => {
  const [location, setLocation] = useState<locationType>({
    loaded: false,
    coordinates: { lat: 0, lng: 0, }
  })

  // 성공에 대한 로직
  const onSuccess = (location: { coords: { latitude: number; longitude: number; }; }) => {
    setLocation({
      loaded: true,
      coordinates: {
        lat: location.coords.latitude,
        lng: location.coords.longitude,
      }
    })
  }

  // 에러에 대한 로직
  const onError = (error: { code: number; message: string; }) => {
    setLocation({
      loaded: true,
      error,
    })
  }

  useEffect(() => {
    // navigator 객체 안에 geolocation이 없다면
    // 위치 정보가 없는 것.
    if (!("geolocation" in navigator)) {
      onError({
        code: 0,
        message: "Geolocation not supported",
      })
    }
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
  }, [])

  return location;
}

export default useGeolocation

useGeolocation Hook 사용하기

(App.tsx)

import useGeoLocation from "./hooks/useGeolocation";

function App() {
  const location = useGeoLocation();

  return (
    <div className="App">
      {location.loaded
        ? JSON.stringify(location)
      : "Location data not available yet."}
    </div>
  );
}

export default App;

---

참고
How to get user Geo location using useGeoLocation hook in ReactJS