[React-Native] expo-location통해 hook 만들기!

 

 

현재 진행하는 플젝에서 위치를 받아오는 부분이다.

이 부분을 expo-location라이브러리로 구현하였다.

 

하.지.만!

 

위치 재설정을 해야하는...로직이라... 고민하던 찰나에

재사용성을 위해 hook으로  만들 것으로 결정!!!

 

---

location 공식문서

https://docs.expo.dev/versions/latest/sdk/location/

Location

---

 

 

GPS 사용 확인 여부를 물어보는 로직과 

실제 위치를 가져오는 로직 이렇게 2가지의 훅을 만들어야했다.

 

import React, { useState, useEffect } from "react";
import styled, { css } from "styled-components/native";
import Theme from "../../Theme/Theme";
import useGpsRes from "../../utils/useGpsRes";

export default function MainGps() {
  const [gpsRes,setGpsRes]=useState({region:"Loading...",district:""})
  const gps = useGpsRes();
    useEffect(async() => {
    const {region,district} = await gps;  
    setGpsRes({...gpsRes,region:region, district:district});
    // useGpsRes();
  }, []);
  return (
    <UserGps>
      {gpsRes?.region} {gpsRes?.district}
    </UserGps>
  );
}
const UserGps = styled.Text`
  color: ${Theme.colors.SkyBlue};
  font-weight: 700;
`;

 

🔼   useEffect로 화면에 진입하면 바로 gps hook을 실행시키고자 하였다.   🔼 

 

useEffect로 진입할때에도 비동기처리해주셔야함요!!!

 

 

 

import * as Location from "expo-location";
import React, { useState, useEffect } from "react";

const useGpsAsk = async () => {
  try {
    const { granted } = await Location.requestForegroundPermissionsAsync();
    return granted;
  } catch (error) {
    Alert.alert("위치정보를 가져올 수 없습니다.");
  }
};

export default useGpsAsk;

🔼 gps사용여부를 물어보는 로직 🔼 

 

Location.requestForegroundPermissionsAsync()을 통해

granted값을 받아온다. 

granted는 boolean값이 온다.

화면에서 활용동의를 하면 true로 반환

 

이때 중요한건!!! 비동기방식으로 문법을 써야한다는 것!!!

처음에..그냥했다가 그 놈의 언디파인드.....

 

 

import * as Location from "expo-location";
import { useState } from "react";
import useGpsAsk from "./useGpsAsk";

const useGpsRes = async () => {
  const granted = await useGpsAsk();
  let region = "";
  let district = "";
  if (granted) {
    const {
      coords: { latitude, longitude },
    } = await Location?.getCurrentPositionAsync({ accuracy: 5 });
    const location = await Location?.reverseGeocodeAsync(
      { latitude, longitude },
      { useGoogleMaps: false }
    );
    region = location[0].region;
    district = location[0].district;
    return {region, district};
  }
  return region, district;
};

export default useGpsRes;

🔼 장소를 리턴하는 훅! 🔼

 

위 에서 만든 gps여부 물어보는 훅을 임포트하여 넣어주고

granted는 true값이 되어야 

로직이 실행된다.

 

 

 const resetGpsAsk = () => {
    useReGpsRes();
  };

 

🔼 위치 재설정 onPress 🔼

훅으로 사용하여 재설정을 누르면

실행시키도록 하였다!

 

 

그럼이만 총총