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

slide 1 of 18, currently active
slide 2 of 18
slide 3 of 18
slide 4 of 18
slide 5 of 18
slide 6 of 18
slide 7 of 18
slide 8 of 18
slide 9 of 18
slide 10 of 18
slide 11 of 18
slide 12 of 18
slide 13 of 18
slide 14 of 18
slide 15 of 18
slide 16 of 18
slide 17 of 18
slide 18 of 18

이번에 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>
  );
};

신간 소식 구독하기

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