2. Builing the Loading View (리액트 네이티브로 날씨앱 만들기)

https://youtu.be/2y_G4iVmGMI

 

 

1. state 만들기

 

- 우리가 정보를 받았는지 안받았는지 알려주는 indicator 필요

 - 로딩 완료되면  정보 보여주고 로딩 안됬으면 로딩스크린

 

* state 관련 링크

https://yuddomack.tistory.com/entry/4React-Native-State%EC%99%80-Props-1%EB%B6%80State

 

State와 Props의 특징

1. Props 혹은 State에 변경이 감지될 때마다 render()가 수행된다. (이는 리액트의 최적화와도 관련있습니다.)

2. State에는 현재 컴포넌트의 화면을 그리는 것과 관련된 대다수의 값들을 담는다.

3. 데이터의 흐름은 상위 컴포넌트에서 하위 컴포넌트로 단방향이다.

4. Props에는 상위 컴포넌트에서 전달받은 값이 담겨있으며 변경 불가능하다.

5. Props 혹은 State는 비동기적(asynchronously)으로 업데이트 될 수 있다.

 

 

 

 

* 자바스크립트 변수선언, 범위

https://poiemaweb.com/es6-block-scope

 

* 리액트 네이티브 변수선언, 범위

https://medium.com/@jang.wangsu/rn-react-native-%EB%B3%80%EC%88%98-%EC%84%A0%EC%96%B8%ED%95%98%EA%B8%B0-bce5b52d88f1

 

var, let, const

 

정확하지는 않치만,

 

현재 개발할 때, var 는 사용을 거의 사용하지 않는다고 합니다.

const와 let으로 개발한다고 합니다.

 

 

1.

var

1. 변수 재선언 가능
2. 변수 재할당 가능
3. function-scoped

2.

let

1. 변수 재선언 불가능
2. 변수 재할당 가능
3. block-scoped

3.

const

1. 변수 재선언 불가능
2. 변수 재할당 불가능
3. block-scoped

 

+스타일은 거의 css문법으로 하는듯

 

 

 

expo Lineargradient : 색, 스타일 지정

ex)

<LinearGradient

colors={["#00C6F8", "#005BEA"]}

style={styles.container}

>

 

 

import React, { Component } from "react";

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

import { LinearGradient } from "expo";

export default class Weather extends Component{

render() {

return (

<LinearGradient

colors={["#00C6F8", "#005BEA", "red"]}

style={styles.container}

>

<View style={styles.upper}>

<Text> Icon here!</Text>

<Text style = {styles.temp}> 35º </Text>

</View>

<View style={styles.lower}>

<Text style = {styles.title}> 비옴 </Text>

<Text style = {styles.subtitle}> 밖을보세요</Text>

</View>

</LinearGradient>

);

}

//LinearGradient: 색, 스타일

// 색상은 from to로 설정

}

const styles = StyleSheet.create({

container: {

flex: 1

},

upper: {

flex: 1,

alignItems: "center",

justifyContent:"center"

},

temp: {

fontSize: 38,

backgroundColor: "transparent",

color: "white",

marginTop: 10

},

lower: {

flex: 1,

alignItems: "flex-start",

justifyContent: "flex-end",

paddingLeft: 25

},

title: {

fontSize: 38,

backgroundColor: "transparent",

color: "white",

marginBottom: 10,

fontWeight : "300"

},

subtitle: {

fontSize: 24,

backgroundColor: "transparent",

color: "white",

marginBottom : 24

}

});