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

이번에 useState를 사용할 때는 기본값으로 숫자 타입인 0을 넣었습니다.

const [count, setCount] = useState(0);

그리고 이 값을 변경하는 onIncrease와 onDecrease 함수를 만들었습니다.

const onIncrease = () => setCount(count + 1);
const onDecrease = () => setCount(count - 1);

이를 Counter 컴포넌트에 Props로 전달해줍니다.

<Counter count={count} onIncrease={onIncrease} onDecrease={onDecrease} />

컴포넌트에 Props를 설정할 때 레퍼런스의 이름이 Props의 이름과 무조건 같아야 할 필요는 없습니다. 즉, 다음과 같은 코드도 전혀 문제가 없다는 것이죠.

const App = () => {
  const [count, setCount] = useState(0);

  const increase = () => setCount(count + 1);
  const decrease = () => setCount(count - 1);

  return (
    <SafeAreaView style={styles.full}>
      <Counter count={count} onIncrease={increase} onDecrease={decrease} />
    </SafeAreaView>
  );
};

신간 소식 구독하기

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