[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 에도 감동...
이제 다음주차 강의로 출발~!
Author And Source
이 문제에 관하여([react] 간단한 카운터앱 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@winscalife/react-간단한-카운터앱-만들기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)