2.8.2 Counter 컴포넌트에 Props 설정하기
이제 Counter 컴포넌트에서 받아올 수 있는 Props를 설정하겠습니다. 이 컴포넌트에 총 세 가지 Props를 설정할 것입니다.
• count: 화면 중앙에 보여줄 값입니다.
• onIncrease: +1 버튼을 눌렀을 때 호출할 함수입니다.
• onDecrease: -1 버튼을 눌렀을 때 호출할 함수입니다.
Counter 컴포넌트 코드를 다음과 같이 수정해보세요.
components/Counter.js
import React from 'react';
import {View, Text, StyleSheet, Button} from 'react-native';
function ({count, onIncrease, onDecrease}) {
return (
<View style={styles.wrapper}>
<View style={styles.numberArea}>
<Text style={styles.number}>{count}</Text>
</View>
<Button title="+1" onPress={onIncrease} />
<Button title="-1" onPress={onDecrease} />
</View>
);
}
(...)