2.8.3 App에서 상태 관리하기
App 컴포넌트에서 Counter 컴포넌트에 전달해야 할 상태를 관리해주겠습니다. 사실 이번에 할 상태 관리는 Counter 컴포넌트에서 해도 무방합니다만, useState로 관리하는 상태를 Props로 전달하는 것을 연습하기 위해 App에서 상태 관리를 해보려 합니다.
App.js 파일을 열어 다음과 같이 코드를 수정해보세요.
App.js
import React, {useState} from 'react';
import {SafeAreaView, StyleSheet} from 'react-native';
import Counter from './components/Counter';
const () => {
const [count, setCount] = useState(0);
const onIncrease = () => setCount(count + 1);
const onDecrease = () => setCount(count - 1);
return (
<SafeAreaView style={styles.full}>
<Counter count={count} onIncrease={onIncrease} onDecrease={onDecrease} />
</SafeAreaView>
);
};
const styles StyleSheet.({
full: {
flex: 1,
},
});
export default App;