리액트 네이티브를 다루는 기술: 2.8.2 Counter 컴포넌트에 Props 설정하기

2.8.2 Counter 컴포넌트에 Props 설정하기

이제 Counter 컴포넌트에서 받아올 수 있는 Props를 설정하겠습니다. 이 컴포넌트에 총 세 가지 Props를 설정할 것입니다.

• count: 화면 중앙에 보여줄 값입니다.

• onIncrease: +1 버튼을 눌렀을 때 호출할 함수입니다.

• onDecrease: -1 버튼을 눌렀을 때 호출할 함수입니다.

Counter 컴포넌트 코드를 다음과 같이 수정해보세요.

components/Counter.js

import React from 'react';
import {View, Text, StyleSheet, Button} from 'react-native';

function Counter({count, onIncrease, onDecrease}) {
  return (
    <View style={styles.wrapper}>
      <View style={styles.numberArea}>
        <Text style={styles.number}>{count}</Text>
      </View>
      <Button title="+1" onPress={onIncrease} />
      <Button title="-1" onPress={onDecrease} />
    </View>
  );
}

(...)

신간 소식 구독하기

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