[react] 카운터 만들기

Big One·2022년 1월 21일
0

react-native

목록 보기
3/3

(+1, -1) 버튼을 누르면 증감하는 카운터를 만들어보도록 하겠습니다.

프로젝트 생성 후 컴포넌트들을 담을 폴더(components)와 Counter.js 파일을 생성합니다.

App.js

import React, {useState} from 'react';
import {SafeAreaView, StyleSheet} from 'react-native';
import Counter from './components/Counter';

const App = () => {
	
    const [count, setCount] = useState(0);
    const onIncrease = () => setCount(count + 1);
    const onDecrease = () => setCount(count - 1);
    
	return(
    	<SafeAreaView>
            <Counter 
              counter={counter} 
              onIncrease={onIncrease}
              onDecrease={onDecrease}
            />
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
	full: {
    	flex: 1,
    },
});

export default App;

components/Counter.js

import React from 'react';
import {StyleSheet, View, Text, 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>
    )
}

const styles = StyleSheet.create({
	wrapper: {
    	flex: 1,
    },
    numberArea: {
    	flex: 1,
    	alignItems: 'center',
        justifyContent: 'center',
    },
    number: {
    	fontSize: 72,
        fontWeight: 'bold',
    },
})

export default Counter;
profile
이번생은 개발자

0개의 댓글