State (React native)

state 는 component 에서 렌더링 되는 데이터를 담고 유지/관리하는 자바스크립트 객체인데,

state 값에 따라 화면에 보여지는 output이 달라진다.

class component 안에서 사용 가능하고, 함수 component를 정의했다면 state의 활용은 불가능하고

state는 render() 함수 바깥에서 정의가 된다.

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

class App extends Component {

  state = {
    sampleText: 'Hello world~!!',
    sampleBoolean: false,
    sampleNum: 1
  }

  inputText = () => (
    this.state.sampleBoolean ?
    <Text>sampleBoolean is true</Text>
    :
    <Text>sampleBoolean is false</Text>
  )

  changeState = () => {
    if(this.state.sampleBoolean == false) {
      this.setState({
        sampleText: 'Text Changed!!!',
        sampleBoolean: true
      })
    } else {
      this.setState({
        sampleText: 'Hello world~!!',
        sampleBoolean: false
      })
    }
  }

  onAdd = () => {
    this.setState(prevState => {
      return {
        sampleNum: prevState.sampleNum +1
      }
    })
  }

  render() {
    return (
      <View style ={styles.backgroud}>
        <Text>Hello World!{"\n"}{this.state.sampleText}</Text>
        {this.inputText()}
        <Text onPress={this.changeState}>{this.state.sampleText}</Text>
        <Text onPress={this.onAdd}>{this.state.sampleNum}</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  backgroud : {
    flex: 1,
    backgroundColor: '#ffffff',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default App;