[React] useGeolocation 사용후기

전에 만들어 놓았던 weather app과 momentum clone app을 리마스터하면서 사용자의 위치값을 받아오는데 또 애를 먹었다.

그래서 뭔가 사용하기 쉬운 라이브러리가 없나 찾아보니 당연하게도 있었다...

useHooks 라이브러리의 useGeolocation hook이다.

---

Page

useHooks - useGeolocation 페이지

---

기존 geolocation API

function success(position) {
  doSomething(position.coords.latitude, position.coords.longitude);
}

function error() {
  alert("Sorry, no position available.");
}

const options = {
  enableHighAccuracy: true,
  maximumAge: 30000,
  timeout: 27000,
};

const watchID = navigator.geolocation.watchPosition(success, error, options);

MDN에서 가져온 기존 JS가 지원하는 geolocation API의 보일러 템플릿이다.

success 함수와 error 함수, 옵션을 선언한 뒤에 변수를 하나 만들어 navigator.geolocation~~~ 대충 봐도 복잡하다.

---

Install

npm i @uidotdev/usehooks

사용전 인스톨

---

useGeolocation

import { useGeolocation } from "@uidotdev/usehooks"; // 사용전 import

const Geo = () => {
	const geo = useGeolocation(); // 변수로 담아 사용

	return(
    	<div>
        	{
            	geo.loading ? 'Loading...' : 
                <>
                	<p>위도 : {geo.latitude}</p>
            		<p>경도 : {geo.longitude}</p>
                </>
            }
        </div>
    )
}

export default Geo;

 

useGeolocation 훅은 정말 간단함 그 자체였다.

위의 코드와 같이 하나의 변수로 선언만 해준다면 위도, 경도, 고도, 로딩제어, 에러제어 등의 값을 담은 객체값을 받게 된다.

---

반환값

useGeolocation 훅이 객체로 반환하는 값들이다.

---

사용자의 위치값을 받는 작업이 얼마나 필요할진 모르겠으나, 나중에 React 작업을 할 때 또 찾게 되지 않을까 생각한다.

useHooks에선 이 밖의 유용한 훅들을 다수 지원하니 시간 날 때 구경이나 해봐야겠다.