[Nomard] React Native - Location

Eugenius1st·2024년 6월 21일
0

React Native

목록 보기
14/22
post-thumbnail

[Nomard] React Native - Location

Expo Location 을 가져와보자!

npx expo install expo-location

다양한 Method 들을 활용할 수 있다.

그 중 Location.reverseCeocodeAsync(Location) 같은 경우,
위도와 경도를 이 function에 주면, 도사와 구역을 반환해 주는 멋진 놈이다.

그럼 Location 을 사용해서 API를 살짝 가져와보자.

    const [location, setLocation] = useState();
    const [isPermitted, setIsPermitted] = useState(true);
    const getPermissions = async () => {
        const { granted } = await Location.requestForegroundPermissionsAsync();
        if (!granted) setIsPermitted(false);

        // 유저 위치 정보 받기
        const curLocation = await Location.getCurrentPositionAsync({ accuracy: 5 }); //정확성
        console.log(curLocation);
    };
    useEffect(() => {
        getPermissions();
    }, []);

//LOG {"canAskAgain": true, "expires": "never", "granted": true, "status": "granted"}
//LOG  {"coords": {"accuracy": 65, "altitude": 90.94493103027344, "altitudeAccuracy": 10, "heading": -1, "latitude": 37.414053404773476, "longitude": 127.09903459508257, "speed": -1}, "timestamp": 1718936118055.523}

두번째 출력값에서 고도, 방향, 위도, 경도, 속도 등을 확인할 수 있다.
그럼 이제 위도와 경도를 가져와보자.

        const {coords:{latitude, longitude}} = await Location.getCurrentPositionAsync({ accuracy: 5 }); //정확성

위와같이 바로 가져올 수있다!!

그럼 아까 서두에 말했던

reverse geocoding 을 해보자~

Location.reverseGeocodeAsync(location, options)

export default function Layout() {
    const [location, setLocation] = useState();
    const [isPermitted, setIsPermitted] = useState(true);
    const getPermissions = async () => {
        const { granted } = await Location.requestForegroundPermissionsAsync();
        if (!granted) setIsPermitted(false);

        // 유저 위치 정보 받기
        const {
            coords: { latitude, longitude },
        } = await Location.getCurrentPositionAsync({ accuracy: 5 }); //정확성
        const curLoctionInfo = await Location.reverseGeocodeAsync({ latitude, longitude }, { useGoogleMaps: false });
        console.log(curLoctionInfo);
    };
    useEffect(() => {
        getPermissions();
    }, []);
  
 //[{"city": "성남시", "country": "대한민국", "district": "시흥동", "isoCountryCode": "KR", "name": "비밀입니다", "postalCode": "비밀입니다", "region": "경기도", "street": "시흥동", "streetNumber": "비밀입니다, "subregion": null, "timezone": "Asia/Seoul"}]
 

그러면 다음과같이 출력되는 것을 확인할 수있다!!

다음엔 날씨 API로 날씨 정보를 가져와보자!

profile
최강 프론트엔드 개발자가 되고싶은 안유진 입니다

0개의 댓글