Counter

App.jsx

import { StatusBar } from "expo-status-bar";
import React, { useState, useEffect } from "react";
import { StyleSheet, Text, View, ScrollView } from "react-native";
import PlusButton from "./components/PlusButton";
import MinusButton from "./components/MinusButton";

export default function App() {
  const [countState, setCounterState] = useState(0);

  const plusF = () => setCounterState(countState + 1)
  const minusF = () => setCounterState(countState - 1)


  return (
    // ScrollView에서 flex 옷을 입히려면 contentContainerStyle 속성에 스타일 이름을 연결 시켜줘야 한다.
    <ScrollView contentContainerStyle={styles.container}>
      <View style={styles.counterBox}>
        <Text style={styles.boxText}>{countState}</Text>
      </View>
      <View style={styles.counterBtn}>
        <PlusButton plusF={plusF}/>
        <MinusButton minusF={minusF}/>
      </View>
      </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "midnightblue",
    alignItems: "center",
    justifyContent: "center",
  },
  counterBtn: {
    flexDirection:'row'
  },
  counterBox: {
    height: 50,
    width: 70,
    backgroundColor: "white",
    marginVertical: 20,
  },
  boxText: {
    marginTop: 15,
    textAlign: "center",
  },
});

PlusButton.jsx(Minus는 문자만 다르다.)

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

export default function PlusButton({ plusF }) {
  return (
    <TouchableOpacity onPress={plusF} style={styles.counterBox}>
      <Text style={styles.counterText}>Plus</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  counterBtn: {
    flexDirection: "row",
  },
  counterBox: {
    height: 50,
    width: 70,
    backgroundColor: "white",
    marginVertical: 20,
  },
  counterText: {
    marginTop: 15,
    textAlign: "center",
  },
});

Plus/Minus라는 버튼을 누를 때 마다 숫자가 변화하는 컴포넌트를 만든 것.
state와 props를 신경쓰며 코드의 흐름을 읽는 데 도움이 되었다.