React Native - expo 활용 Counter App (useState 복습)

'스무디 한 잔 마시며 끝내는 React Native' Counter app을 expo 에서 동일하게 구현해봅니다.

 

react-native cli 구현 코드는 여기 https://yannichoongs.tistory.com/153

다른 곳에서도 useState Component 를 배우기 위한 가장 기본적인 예제로 활용되는 코드입니다.

 

$ expo init CounterExample
$ cd CounterExample
$ expo start

 

[App.js]

- count 값을 setCount() 시 dynamic 하게 변경되도록 useState Component 사용

  const [count, setCount] = useState(10);

- image 를 touchableOpacity component 로 감싸 clickable 하게 만든 후
click 시 onPress event 로 setCount() 불러주면서 count 값 변경.

        <TouchableOpacity onPress= {() => setCount(count + 1)}>

          <Image source={require('./assets/add.png')}/>

        </TouchableOpacity>

import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import { Text, View, Image, TouchableOpacity } from 'react-native';

import {GlobalStyles} from './GlobalStyles';

export default function App() {
  const [count, setCount] = useState(10);

  return (
    <View style={GlobalStyles.appContainer}>
      <StatusBar style="auto" />
      
      <View style={GlobalStyles.topContainer}>
        <Text style={GlobalStyles.textContainer}>This is Counter Example</Text>
      </View>

      <View style={GlobalStyles.midContainer}>
        <Text style={GlobalStyles.textContainer}>{count}</Text>
      </View>

      <View style={GlobalStyles.bottomContainer}>
        <TouchableOpacity onPress= {() => setCount(count - 1)}>
          <Image 
            source={require('./assets/remove.png')}
          />
        </TouchableOpacity>
        <TouchableOpacity onPress= {() => setCount(count + 1)}>
          <Image 
            source={require('./assets/add.png')}/>
        </TouchableOpacity>

      </View>
      
     

    </View>    
  );
}

 

[GlobalStyles.js]

- styles 만을 위한 별도 js 를 만들어 관리합니다.

import {StyleSheet} from 'react-native';

export const GlobalStyles = StyleSheet.create({
    appContainer: {
      flex: 1,  
      backgroundColor: '#ffe',
      alignItems: 'center',
      justifyContent: 'center',
    },
  
    topContainer: {
      flexDirection:"row",    
      flex: 1,
      width:'100%',
      backgroundColor: '#aaf',
      alignItems: 'center',
      justifyContent: 'space-around',
    },
    midContainer: {
      flexDirection:"row",
      width:'100%',
      flex: 1,
      backgroundColor: '#aff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  
    bottomContainer: {
      flexDirection:"row",
      width:'100%',
      flex: 1,
      backgroundColor: '#ada',
      alignItems: 'center',
      justifyContent: 'center',
    },
    textContainer: {
      fontWeight:'bold',
      fontSize:20,
    }
  
  });

 

완성된 화면

결론,

- expo 너무 편합니다 ( react-native cli 대비)

- window 환경 에서도 ios 에 app 올려보려면 expo 밖에 없음..