useState

App.js

import { StyleSheet, Text, View, Button } from "react-native";
import React, { useEffect, useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("Jack");
  const [person, setPerson] = useState({
    name: "Chris",
    age: 88,
  });

  useEffect(() => {
    if (count % 2 === 1) {
      setName("Dan");
      setPerson({
        name: "Carol",
        age: 26,
      });
    } else {
      setName("Jack");
      setPerson({
        name: "Chris",
        age: 88,
      });
    }
  }, [count]);

  const clickHandler = () => {
    setCount(count + 1);
  };

  return (
    <View style={styles.container}>
      <Text>My name is {name}</Text>
      <Text>
        His name is {person.name}, and his age is {person.age}
      </Text>

      <View style={styles.buttonContainer}>
        <Button title="update state" onPress={clickHandler} />
        <Text style={styles.clickCounter}>
          You Clicked the button {count} times.
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  buttonContainer: {
    marginTop: 20,
  },
  clickCounter: {
    marginTop: 20,
    fontWeight: "bold",
  },
});

---

클릭 횟수가 짝수, 홀수일 때 서로 다른 인물의 정보를 출력

setState는 비동기처리 되므로 useEffect를 써봤음

---

실행화면