React-Native App 개발(component 이용한 counter 만들기)

앱개발 플러스 1주차 숙제이다.

component를 이용하여 counter 프로그램 만들기.

MinusButton.js, PlusButton.js 두개의 component를 만들고, 'setState' 함수를 이용하여 버튼을 누를 때마다 숫자가 증가 혹은 감소하도록 하였다.

 

결과 화면이다.(스타르타 자료 중 캡쳐)

App.js

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import MinusButton from './components/MinusButton';
import PlusButton from './components/PlusButton';

export default function App() {
  const [state, setState] = useState(0);

  const Plus = ()=>{
    setState(state + 1);
  };

  const Minus = ()=>{
    setState(state - 1);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.textContainer}>Counter: {state}</Text>
      <View style={styles.buttonContainer}>
        <PlusButton Plus={Plus}/>
        <MinusButton Minus={Minus}/>
      </View>
      <StatusBar style='auto'/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  textContainer:{
    fontSize: 20
  },
  buttonContainer:{
    marginTop: 50,
    flexDirection: 'row'
  }
});

 

MinusButton.js

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

export default function MinusButton({ Minus }) {
  return (
    <TouchableOpacity onPress={Minus} style={styles.minusButtonContainer}>
      <Text> Minus </Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  minusButtonContainer:{
    flex: 1,
    backgroundColor: '#407A0B',
    height: 50,
    alignItems: 'center'
  }
});

 

PlusButton.js

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

export default function PlusButton({ Plus }) {
  return (
    <TouchableOpacity onPress={Plus} style={styles.plusButtonContainer}>
      <Text> Plus </Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  plusButtonContainer:{
    flex: 1,
    backgroundColor: '#EAE128',
    height: 50,
    alignItems: 'center'
  }
});