useGeolocation

useGeolocation는 사용자의 지리적 위치를 검색하고 추적하는 리액트 훅이에요. 브라우저의 Geolocation API를 사용하여 단회 위치 검색과 지속적인 위치 추적을 모두 지원해요.

Interface

function useGeolocation(options: GeolocationOptions): Object;

파라미터

• optionsGeolocationOptions
  

  지리적 위치 옵션 설정이에요

  • options.mountBehaviorGeolocationMountBehaviorType
    

    훅이 마운트 시 어떻게 동작하는지:
    - 제공되지 않으면 자동으로 위치를 가져오지 않아요
    - 'get': 컴포넌트가 마운트될 때 위치를 자동으로 한 번 가져와요
    - 'watch': 컴포넌트가 마운트될 때 위치 변경 추적을 자동으로 시작해요

  • options.enableHighAccuracyboolean · false
    

    만약 참이라면, 더 정확한 위치 정보를 제공해요 (배터리 소비 증가)

  • options.maximumAgenumber · 0
    

    반환이 허용되는 캐시된 위치의 최대 나이(밀리초)예요

  • options.timeoutnumber · Infinity
    

    위치를 요청할 때 허용되는 최대 시간(밀리초)예요

반환 값

• Object
  

  위치 데이터와 관련된 함수들을 포함하고 있어요

  • loadingboolean
    

    현재 위치 데이터를 가져오는 중인지 여부를 나타내요.

  • errorCustomGeoLocationError|null
    

    오류가 발생했을 때의 오류 객체이거나 null이에요. 이 훅은 표준 Geolocation API 오류 코드(1-3)와 사용자 정의 코드(0)를 사용해요
    : 0 - 이 환경에서는 지리적 위치가 지원되지 않아요
    : 1 - 사용자가 지리적 위치 접근 허용을 거부했어요
    : 2 - 위치를 사용할 수 없어요
    : 3 - 시간 초과 - 지리적 위치 요청이 너무 오래 걸렸어요.

  • dataGeolocationData|null
    

    위치 데이터 객체 또는 null이에요
    : 위도 number - 십진수로 표현된 위도예요
    : 경도 number - 십진수로 표현된 경도예요
    : 정확도 number - 위치의 정확도(미터)예요
    : 고도 number|null - WGS84 타원체 기준의 고도(미터)예요
    : 고도 정확도 number|null - 고도의 정확도(미터)예요
    : 방위 number|null - 진북에서 시계방향으로의 방위(도)예요
    : 속도 number|null - 속도(미터/초)예요
    : 타임스탬프 number - 위치가 검색된 시간이에요.

  • getCurrentPositionFunction
    

    현재 위치를 한 번 가져오는 함수에요.

  • startTrackingFunction
    

    위치 변경 추적을 시작하는 함수에요.

  • stopTrackingFunction
    

    위치 추적을 중지하는 함수에요.

  • isTrackingboolean
    

    현재 위치 추적이 활성화되어 있는지 여부를 나타내요.

예시

// 기본 사용법
const {
  loading,
  error,
  data,
  getCurrentPosition
} = useGeolocation();

// 컴포넌트가 마운트 될 때 자동으로 위치를 가져와요
const {
  loading,
  error,
  data
} = useGeolocation({ mountBehavior: 'get' });

// 위치 추적
const {
  loading,
  error,
  data,
  startTracking,
  stopTracking,
  isTracking
} = useGeolocation();

const handleStartTracking = () => {
  startTracking();
};

const handleStopTracking = () => {
  stopTracking();
};