리액트에서 내 위치 요청하기 useGeoLocation 🖐

미니 프로젝트를 진행하면서 유저의 위도와 경도가 필요했다. 그래서 요청하는 법을 알아보기로 했다. 내 위치 요청을 하려면 자바스크립트 API인 Geolocation을 이용하여아 한다.

먼저 자바스크립트에서 내 위치를 요청해보자.

function getLocation() {
  if (navigator.geolocation) { // GPS를 지원하면
    navigator.geolocation.getCurrentPosition(function(position) {
      alert(position.coords.latitude + ' ' + position.coords.longitude);
    }, function(error) {
      console.error(error);
    }, {
      enableHighAccuracy: false,
      maximumAge: 0,
      timeout: Infinity
    });
  } else {
    alert('GPS를 지원하지 않습니다');
  }
}
getLocation();

위 코드를 실행하면 다음과 같이 나온다.

리액트에서 useGeolocation Hook 사용하기

useGeoLocation.js

import { useState, useEffect } from "react";

const useGeoLocation = () => {
  const [location, setLocation] = useState({
    loaded: false,
    coordinates: { lat: "", lng: "" },
  });


  const onSuccess = (location) => {
    setLocation({
      loaded: true,
      coordinates: {
        lat: location.coords.latitude,
        lng: location.coords.longitude,
      },
    });
  };

  const onError = (error) => {
    setLocation({
      loaded: true,
      error: {
        code: error.code,
        message: error.message,
      },
    });
  };

  useEffect(() => {
    if (!("geolocation" in navigator)) {
      onError({
        code: 0,
        message: "Geolocation not supported",
      });
    }
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
  
}, []);

  return location;
};

export default useGeoLocation;

App.js

import useGeoLocation from "./useGeoLocation";

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

export default App;

위도와 경도가 잘 들어왔다.

출처
https://www.zerocho.com/category/HTML&DOM/post/59155228a22a5d001827ea5d

https://www.youtube.com/watch?v=J4PDxTO3oj0&t=1s