(+1, -1) 버튼을 누르면 증감하는 카운터를 만들어보도록 하겠습니다.
프로젝트 생성 후 컴포넌트들을 담을 폴더(components)와 Counter.js 파일을 생성합니다.
App.js
import React, {useState} from 'react';
import {SafeAreaView, StyleSheet} from 'react-native';
import Counter from './components/Counter';
const App = () => {
const [count, setCount] = useState(0);
const onIncrease = () => setCount(count + 1);
const onDecrease = () => setCount(count - 1);
return(
<SafeAreaView>
<Counter
counter={counter}
onIncrease={onIncrease}
onDecrease={onDecrease}
/>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
full: {
flex: 1,
},
});
export default App;
components/Counter.js
import React from 'react';
import {StyleSheet, View, Text, Button} from 'react-native';
function Counter(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>
)
}
const styles = StyleSheet.create({
wrapper: {
flex: 1,
},
numberArea: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
number: {
fontSize: 72,
fontWeight: 'bold',
},
})
export default Counter;