[react] 간단한 카운터앱 만들기

스파르타 코딩클럽 앱개발플러스 1주차 수강을 마무리하는 날, 매주마다 숙제로 마무리를 하는데, 난 거의 숙제해설을 보고 하는 편... ㅎㅎ;; 뭐 ㅋ도 모르면서 코딩을 하다보니...
그래도 종합반을 듣고 와서 그런지 어떤 파일을 추가해야하는지 어디에 추가해야하는지가 좀 감이 온다. 어떤 코딩을 넣어야하는지는 아직도 잘 모르지만, 이만큼의 발전도 감사할 따름이다.

컴포넌트 폴더에 플러스, 마이너스 파일을 추가하고, App,jsx에 카운트 상태가 변경되도록 하면 되는...

명령어들을 쓰는게 아직은 어색하고 따라해야하는 실정이지만, 계속 하다보면 언젠가는 익숙해지겠지...

+++MinusButton.jsx

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

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'green',
    width: 50,
    height: 50,
  },
});

+++PlusButton.jsx

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

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'yellow',
    width: 50,
    height: 50,
  },
});

+++App.jsx

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Text, Alert, ScrollView } from 'react-native';
import PlusButton from './components/PlusButton';
import MinusButton from './components/MinusButton';

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

  const Minus = () => {
    console.log('마이너스');
    setState(state - 1);
  };

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

  return (
    <View style={styles.contianer}>
      <Text style={styles.count}>카운터 : {state}</Text>
      <View style={styles.buttonContainer}>
        <PlusButton Plus={Plus} />
        <MinusButton Minus={Minus} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  contianer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  count: {
    fontSize: 20,
    margin: 10,
    padding: 10,
    borderRadius: 10,
    borderWidth: 2,
    borderColor: '#000',
    borderStyle: 'dotted',
  },
  buttonContainer: {
    marginTop: 50,
    flexDirection: 'row',
  },
});

이렇게 하면 plus 버튼을 누를땐 1씩 증가하고, minus 버튼을 누를땐 1씩 감소하게 된다.

참으로 신기한 코딩... 이 모든 것을 가능하게 해준 react 와 expo 에 감동...

눈으로 확인하게 해준 vscode 에도 감동...

이제 다음주차 강의로 출발~!