리액트 네이티브를 다루는 기술: 2.8.3 App에서 상태 관리하기

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 App = () => {
  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.create({
  full: {
    flex: 1,
  },
});

export default App;

신간 소식 구독하기

뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.