앱의 기능을 구현하기 전에 리액트의 Context API에 대해 알아봅시다. 기존에 내비게이션을 사용하지 않을 때는 데이터를 다른 컴포넌트에 전달하기 위해 Props를 사용했습니다. 다음과 같이 말이죠.

function Counter({ value, onIncrease, onDecrease }) {
  return (
    <View>
      <Text>{value}</Text>
      <Button title="+" onPress={onIncrease} />
      <Button title="-" onPress={onDerease} />
    </View>
  )
}

function App() {
  const [value, setValue] = useState(0);
  const onIncrease = () => setValue(value + 1);
  const onDecrease = () => setValue(value - 1);
  return (
    <Counter 
      value={value}
      onIncrease={onIncrease}
      onDecrease={onDecrease}
    />
  )
}