[React] geoLocation API로 현재 위치를 알아보자

현재 위치를 구하려면

날씨 앱 구현을 위해 Web API인 Geolocation API를 사용해 현재 위치를 구할 수 있는 hook을 만들어보았다.

 

Geolocation API는 사용자가 원할 경우 웹 애플리케이션에 위치 정보를 제공할 수 있는 API이다.

Geolocation은 navigator.geolocation을 통해 접근하고, 사용자가 허가할 경우 현재 장치에서 GPS, Wifi 등 사용 가능한 최선의 방법으로 위치를 알아낸다.

위치 정보를 가져오는 방법에는 두 가지가 있다.

• Geolocation.getCurrentPosition(): 장치의 현재 위치를 가져온다.
• Geolocation.watchPosition(): 장치의 위치가 바뀔 때마다 자동으로 새로운 위치를 사용해 호출할 처리기 함수를 등록한다.

일단 처음 한 번만 위치를 알아내도록 할 것이기 때문에 getCurrentPosition을 사용해주었다.

 

Geolocation.getCurrentPosition()

navigator.geolocation.getCurrentPosition(success, error, [options])

• success: GeolocationPosition 객체(위치 정보)를 유일한 매개변수로 받는 콜백 함수
• error(Optional): GeolocationPositionError 객체(에러 정보)를 유일한 매개변수로 받는 콜백 함수
• options(Optional): 아래 옵션들을 포함하는 객체
  • maximumAge: 캐시에 저장한 위치정보를 대신 반환할 수 있는 최대 시간(기본값 0). 0인 경우 위치정보 캐시를 사용할 수 없고 반드시 실시간으로 위치를 알아낸다는 뜻. Infinity를 지정한 경우 항상 캐시에 저장된 위치정보를 반환함을 나타낸다.
  • timeout: 기기가 위치를 반환할 때 소모할 수 있는 최대 시간(밀리초). 기본값은 Infinity로, 위치를 알아내기 전까지는 getCurrentPosition이 값을 반환하지 않을 것임을 나타낸다.
  • enableHighAccuracy: 위치 정보를 가장 높은 정확도로 수신하고 싶음을 나타내는 불리언 값(기본값 false). true를 지정하면 장치가 더 정확한 위치를 제공한다. 그러나 응답 속도가 느려지고 전력 소모량이 증가한다. false인 경우 더 빠르게 반응하고 전력 소모도 줄일 수 있는 대신 정확도가 떨어진다.

 

useGeoLocation Hook으로 현재 내 위치 불러오기

hooks/useGeoLocation.ts

import { useState, useEffect } from 'react'

interface ILocation {
  latitude: number
  longitude: number
}

export const useGeoLocation = (options = {}) => {
  const [location, setLocation] = useState<ILocation>()
  const [error, setError] = useState('')

  const handleSuccess = (pos: GeolocationPosition) => {
    const { latitude, longitude } = pos.coords

    setLocation({
      latitude,
      longitude,
    })
  }

  const handleError = (err: GeolocationPositionError) => {
    setError(err.message)
  }

  useEffect(() => {
    const { geolocation } = navigator

    if (!geolocation) {
      setError('Geolocation is not supported.')
      return
    }

    geolocation.getCurrentPosition(handleSuccess, handleError, options)
  }, [options])

  return { location, error }
}

 

컴포넌트에서 사용할 때는 아래와 같이 사용해주면 된다.

import { useGeoLocation } from 'hooks'

const geolocationOptions = {
  enableHighAccuracy: true,
  timeout: 1000 * 10,
  maximumAge: 1000 * 3600 * 24,
}

const Weather = () => {
  const { location, error } = useGeoLocation(geolocationOptions)

  return (
    <div>{location.latitude, location.longitude}</div>
  )
}

export default Weather

options은 원하는대로 세팅한 후에 useGeoLocation 훅에 넘겨주면 된다.

 

 

References

https://developer.mozilla.org/ko/docs/Web/API/Geolocation_API

https://developer.mozilla.org/ko/docs/Web/API/Geolocation/getCurrentPosition

https://developer.mozilla.org/ko/docs/Web/API/Geolocation_API/Using_the_Geolocation_API

https://developer.mozilla.org/en-US/docs/Web/API/GeolocationPositionError/code

https://jw910911.tistory.com/108