arrow function parameter 넣기

es6 에서 부터는 이전의 함수 형식도 지원하지만, arrow function을 사용을 지향한다.

이번에는 arrow function을 이용한 숫자 카운트 올리는 소스를 작성해보려고한다.

import React, { Component } from "react";

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

import { black } from "ansi-colors";

 

export default class App extends Component {

state = {

    number: 1

};

 

change_number = (type) => {

    if(type === 'minus'){

        this.setState({ number: this.state.number - 1 })

    }else{

        this.setState({ number: this.state.number + 1 })

    }

};

 

render() {

return (

    <View style={styles.container}>

    <View style={styles.button}>

<Button onPress={() =>{this.change_number('minus')}} title={"-"} />

     </View>

    <Text style={styles.text}>{this.state.number}</Text>

<View style={styles.button}>

<Button onPress={this.change_number } title={"+"} />

</View>

    </View>

           );

        }

}

 

const styles = StyleSheet.create({

    container: {

flex : 1,

justifyContent : 'center',

flexDirection : 'row',

alignItems : 'center'

    },

button: {

flex : 1 ,

margin: 10

},

text : {

flex : 1 ,

textAlign: 'center',

textAlignVertical: 'center',

fontSize : 20

}

});

 

<결과물>