[react-native] 고유 첫 프로젝트: counter

 거의 모든 웹/앱 개발 언어 실습의 고유 첫 프로젝트인 아주 간단히 버튼으로 숫자만 하나씩 증가/감소시킬 수 있는 카운터를 만들어보자.

---

◎components/Counter.js

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

const 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;

 

◎App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

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 style={styles.full}>
      <Counter count={count} onIncrease={onIncrease} onDecrease={onDecrease} />
    </SafeAreaView>
  );
};

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

export default App;

 

진짜 아~~주 간단히 useState를 사용하는 실습을 하기 위한 연습용 프로젝트이다.

 

딱히... 부가적으로 적을 내용은 없는 거 같다.

 

ESLint가 생각보다 엄~청나게 까다로워서 ESLint 셋팅만 진짜 오래 했다...허허..