React Native(리액트 네이티브) 위치 API 이용해서 온도 받아오기

2020/07/11 - [React & React-Native] - React Native(리액트 네이티브) 위치 API 이용해서 온도 받아오기

expo 다운로드가 되어야 하고,

안드로이드 스튜디오 설치가 되어야 합니다.

 

1. view에 대해서

리액트 네이티브의 View는 HTML의 div 같은 존재입니다.

Text는 HTML의 span 같은 존재입니다.

 

2. Component 생성

//App.js

import React, { Component } from 'react';
import { StyleSheet, Platform, View, Text } from 'react-native';
import Loading from './component/Loading';

export default class App extends Component {
  render() {
    return (
      <Loading></Loading>
    );
  }
}

 

//Loading.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function Loading() {
    return <View style={styles.container}>
        <Text style={styles.text}>getting the fucking weather</Text>
    </View>;
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "flex-end",
        paddingHorizontal: 30,
        paddingVertical: 100,
        backgroundColor: "#FDF6AA"
    },
    text: {
        color: "#2c2c2c",
        fontSize: 24
    }
})

expo를 받으면 기본적으로 만들어지는 App에서 

추가적인 component를 생성해줍니다.

이름은 Loading.js로 위치API와 날씨API를 받기전에 표시해줄 화면을 나타낼 컴포넌트입니다.

 

파일구조

저는 component 라는 폴더를 따로 생성을 해주고, 그 안에 Loading.js를 넣어주었습니다.

 

Loading 컴포넌트가 표시된 화면

 

3. Geolocation API 추가 및 permission 추가

import React, { Component } from 'react';
import {Alert} from 'react-native';
import Loading from './component/Loading';
import * as Location from 'expo-location';

export default class App extends Component {
  getLocation = async() => {
    try {
      await Location.requestPermissionsAsync();
      const location = await Location.getCurrentPositionAsync();
      console.log(location);
    } catch (error) {
      Alert.alert("당신의 위치를 찾을 수 없어요!", "슬퍼요");
    }
    
  }
  
  componentDidMount(){
    this.getLocation();
  }
  
  render() {
    return (
      <Loading />
    );
  }
}

 

위치 API를 사용하려면 휴대폰의 위치에 대한 Permission을 사용자로부터 받아와야 합니다.

 

요기서는 await Location.requestPermissionsAsync(); 문장을 통해서 사용자로부터 위치 Permission을 받아냅니다.

 

만약 사용자가 거부를한다면 catch문이 실행되는 구조입니다.

 

 

위치 permission

Location.getCurrentPositionAsync()로 받아온 내용

 

4. 날씨 API 받아오기

 

온도를 알기위해서는 날씨 API가 필요합니다.

날씨 API는 아래 사이트에서 받아옵니다.

회원가입 후 API KEY를 받아와야합니다.  

 

 

https://openweathermap.org/current

Current weather data - OpenWeatherMap

 

  getWeather = async ( latitude, longitude ) => {
    const { data } = await axios.get(
      `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`
    );
    console.log(data);
    this.setState({
      temp: data.main.temp,
      isLoading : false
    })
  }

App.js에 getLocation()의 try문에 추가해줄 온도를 받아오는 함수입니다.

위의 코드에서 적어놓은 http 주소에 임의의 경도, 주소, 그리고 자신의 API KEY를 넣게되면

홈페이지에서 API를 확인해볼 수 있습니다.

 

홈페이지에서 확인해본 날씨 API 결과

 

코드 구조가 보기 어렵게 되어있어서 크롬의 JSON Viewer를 설치하면 더 가독성이 좋게 볼 수 있습니다.

 

https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=ko&hc_location=ufi

JSON Viewer

viewer를 설치하고 난 뒤

저희는 온도가 필요하기 때문에 temp state에 data.main.temp로 접근해서 온도를 받아옵니다.

 

5. 최종 결과물

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Loading  from './component/Loading';
import axios from "axios";
import * as Location from "expo-location";

const API_KEY = '6420351a926dc59bf08ae6d12e5cc3f2';

export default class App extends Component {

  state = {
    isLoading : true,
    temp : "",
    latitude : 0,
    longitude: 0
  }

  componentDidMount(){
    this.getLocation();
  }

  getWeather = async ( latitude, longitude ) => {
    const { data } = await axios.get(
      `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`
    );
    // console.log(data);
    this.setState({
      temp: data.main.temp,
      isLoading : false
    })
  }

   getLocation = async() => {
      try {
       await Location.requestPermissionsAsync();
        const { 
          coords: { latitude, longitude }
        } = await Location.getCurrentPositionAsync();
        this.getWeather(latitude, longitude);
        this.setState({
          latitude : latitude,
          longitude: longitude
        })
        // console.log(latitude, longitude);
      } catch (error) {
        Alert.alert("당신의 위치를 찾을 수 없어요!", "슬퍼요");
      }
   }

   render() {
     const {isLoading, temp, latitude, longitude} = this.state;
    return (
       isLoading ? <Loading /> : 
       <View style={styles.container}>
         <Text style={styles.location}>
            경도 : {latitude}
         </Text>
         <Text style={styles.location}>
            위도 : { longitude}
         </Text>
         <Text style={styles.temp}>
            온도 : {temp}
         </Text>
       </View>
    );
  }
}

const styles = StyleSheet.create({
    container:{
      flex: 1,
      justifyContent: "center",
      alignItems: "center"
    },
    location:{
      flex: 1,
      fontSize: 30,
      textAlignVertical: 'center',
      fontWeight: "bold"
    },
    temp:{
      flex: 1,
      fontSize: 30,
      textAlignVertical: 'center',
      fontWeight: "bold"
    }
})

 

하나의 View에 경도와 위도와 온도를 따로따로 표시해보았습니다.

 

결과물

 

참고한 사이트

https://nomadcoders.co/

Nomad Coders

니콜라스 선생님의 날씨앱 강의를 참고했습니다.