React Native 날씨앱(5). 날씨 표시 화면에 정보 전달

Pass to Weather Screen

날씨 정보를 얻어 왔으면 다음 단계로 날씨를 나타내는 화면을 만들어 프로젝트를 완성시키면 된다.
그전에 정보들을 뽑아내 화면을 출력해주는 컴포넌트에 보내야 한다. 
이전 포스트에서 받아온 data의 항목을 보면 "main"이라는 부분과, "weather"이라는 부분을 보면 원하는 정보들이 있다.

"main"부분의 temp는 온도를 나타내는 지표이다. 원래는 화씨온도로 나오는데 HTTP 통신 제일 뒤에 &units=metric이라고 붙여 주면 섭씨온도로 변환해준다.

api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={your api key}&units=metric

 

weather은 배열로 응답이 왔다. 배열에는 하나의 객체만 들어있고, 그 객체에 main에 있는 weater title이 필요하다.
그렇다면 이 두개의 값들을 변수로 받은 뒤 표시하는 screen에 props로 전달하면 된다.

다음은 App.js의 코드이다.

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

const API_key = 'e096ae46f45b79ac3723946f3382abb6';

export default class App extends React.Component{
    constructor(props){
        super(props);
    }
    state = {
        errorMsg: ' ',
        isLoading: true,
    }

    getLocation = async() =>{
        const status  = await Location.requestPermissionsAsync();
        if (status != 'granted') {
            this.setState({errorMsg : 'Permission to access location was denied'});
            console.log(this.state.errorMsg);
        }
        const {
            coords: {latitude, longitude}
        } = await Location.getCurrentPositionAsync();
  
        this.getWeather(latitude, longitude);

    }

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

    componentDidMount(){
        this.getLocation();
    }

    render(){
        const {isLoading,temp,condition } = this.state;
        return isLoading ? <Loading/> :  <Screen temp = {Math.round(temp)} condition={condition} />;
    }
}

 

axios를 이용하여 받아오는 {data}에서 weather이라는 배열과, {main}이란 객체 안에 {temp}라는 값을 변수로 받아와 setState를 시켜준다. 그 뒤 render 할 때 props로 전달한다. 
이제 저 값들을 이용해 render해주는 스크린만 만들면 된다.