React_Native (1)

😁 React Native는 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크.

📌 무엇이 React와 다를까??
1. View : html에서의 div와 같은 역할.
2. flex:1 -> 부모 컨테이너, 모든 공간 사용 가능.
3. flex:1 flex:2 -> 전체 공간을 1:2로 차지.
4. width, height보다 flex를 사용하는 것이 👍

🔴 간단한 코드 예제를 보며 이해 ❗

💻 App.js 코드

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style = {styles.yellowView}/>
      <View style = {styles.blueView}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  yellowView:{
    flex:1,
    backgroundColor:"yellow"
  },
  blueView: {
    flex:1,
    backgroundColor:"blue"
  }
});

😀 코드 설명
1. container View 안에 yello, blue View 두 자식 포함.
2. yelloView, blueView의 flex는 1, 1 이는 둘의 공간이 1:1을 차지함을 의미.
3. View는 html에서의 div를 의미.

🔴 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", //content의 내용을 밑단으로 내림.
        paddingHorizontal:30,
        paddingVertical : 150,
        backgroundColor:"#FDF6AA"
    },
    text:{
        color:"#2c2c2c",
        fontSize: 20
    }
});

😀 코드 설명

1. Loading function
   • View의 부모 컨테이너에 Text 자식 배치.
2. styles
   • justifyContent : "flew-end" : content를 밑으로 내림.
   • paddingHorizontal:30, paddingVertical : 150 : 세로와 가로의 padding 공간을 수치만큼 설정.
   • fontSize : 20 or fonrSize:"20px" 이런 방식으로 작성해줘야 함.

🔴 expo API에서 location 받아오기.

1. terminal에서 expo install expo-location 로 location API 설치.
2. function형 -> class형

💻 App.js 코드

export default class extends React.Component {
  getLocation = async() =>{
    const location = await Location.getCurrentPositionAsync();
    console.log(location);
  }
  componentDidMount(){
    this.getLocation();
  }
  render(){
    return <Loading />;
  }
}

😀 코드 설명

1. Location.getCurrentPositionAsync는 await 함수이기에 async() 함수를 통해 만듬.
2. componentDidMount() 안에 getLocation 함수 넣어줌.

🔴 Location을 받기 위해 사용자 위치 정보 확인.

💻 App.js 코드

export default class extends React.Component {
  state = {
    isLoading: true
  }
  getLocation = async() =>{
    try{
      await Location.requestPermissionsAsync();
      const {coords : {latitude, longtinude}} = await Location.getCurrentPositionAsync();
      //send to API and get weather!
      this.setState({isLoading:false})
    }catch(error){
      Alert.alert("Can't find you.", "so sad");
    }
  }
  componentDidMount(){
    this.getLocation();
  }
  render(){
    const {isLoading } = this.state;
    return isLoading? <Loading /> : null;
  }
}

😀 코드 설명

1. getLocation 함수는 위치를 가져오는 함수.
2. 그러나 위치를 가져오기 위해서는 사용자의 위치정보동의가 필요.
3. try catch문의 try문에 Location.requestPermissionAsync() 사용하여 사용자 동의 받아옴.
4. 만약 동의하지 않으면 catch문에서 잡혀 error Alert를 발생.
5. const {coords:{latitude,longtitude}} = await Location.getCurrentPositionAsync() 위도와 경도 가져오기.
6. isLoading은 데이터를 가져오는 시간이 있기에 true의 기본값에서 데이터를 모두 가져오는 순간 false로 넘어감. 둘의 bool값에 따른 Loading창 출력유무.

🔴 위도, 경도를 가지고 날씨 가져오기.

💻 App.js 코드

import axios from "axios";
import * as Location from "expo-location";

const API_KEY = "d6ee5391a7da7b3a908bb7093fd3fa0d";

export default class extends React.Component {
  ...
  getWeather = async(latitude, longitude) =>{
    const {data} = await axios.get(
      `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${API_KEY}`
      );
      console.log(data);
  };

😀 코드 설명

1. openweather.io에서 API_KEY 가져옴.
2. getWeather 비동기 함수에서 axios를 통해 API 가져옴.
3. `` 안에 넣어주어 longtitude, latitude, api_key 넣어줌.

<출처 : 노마드 코더>