오류 | API 호출 undefined(feat. React)

현재 위치가 곧바로 return 되지 않는 문제

 

❓상황

navigator.geolocation API 를 react의 hook인 usePosition()으로 만들고 나서, return 값 저장시 undefined로 발생

 

🔎 원인 파악

API 호출 시 API 호출 값을 받기 전까지, 실행되지 않게 설정하지 않아서 발생한 문제(비동기 설정 X)

 

또한, gelocation 메소드는 return 반환이 없다는 것.

 

✨ 해결 방법

1. 함수에 new Promise 를 정의하여, 반환되는 값 나오게 만들기

  function get() {
    return new Promise((resolve, reject) =>
      navigator.geolocation.getCurrentPosition(
        (position) => resolve(onSuccess(position)),
        (error) => reject(onError(error))
      )
    );
  }

 

2. 반환된 값 return

  const data = await get();
  return data;