IT 유용한 정보

[ react-native ] prevState

JooKit 주킷 2021. 1. 18. 23:22
목차 접기
728x90
반응형

import React, {Component} from 'react';
import {View, Text, Alert, StyleSheet} from 'react-native';
import Header from './src/header';
import Generator from './src/generator';
import NumList from './src/numList';

class App extends Component<any, any> {


  state = {
    appName: 'My First App',
    random: [23, 11]
  }

  onAddRandomNum = () => {
    const randomNum = Math.floor(Math.random()*100)+1;

    this.setState((prevState: { random: any; }) => {
      return {
        random:[...prevState.random, randomNum]

      }
    })
  }




  render() {
    return (
      <View style={styles.mainView}>
        <Header name={this.state.appName}/> 
        <View>
          <Text 
          style={styles.mainText}
          onPress={() => Alert.alert('Hello World!!!')}
          >Hello World</Text>
        </View>
        <Generator add={this.onAddRandomNum}/>

        <NumList num={this.state.random}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  mainView: {
    backgroundColor: 'white',
    flex: 1,
    paddingTop: 50,
    //justifyContent: 'center',
    alignItems: 'center'
  },
  subView: {
    backgroundColor: 'yellow',
    marginBottom: 10
  }, 
  anotherSubView: {
    backgroundColor: 'yellow',
    flex: 2,
    marginBottom: 10,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center'
  },
  mainText: {
    color: 'red',
    fontWeight: 'normal',
    fontSize: 20,
    padding: 20
  }
})

export default App;

prevState

  • state가 가지고 있는 값
  • ...prevState 의미 : 해당 state가 가지고 있는 모든 값에 더하는?
728x90
반응형
LIST