[React Native] 3장 상태 관리

1. useState

useState는 컴포넌트의 상태를 관리하는 데 사용됩니다. useState를 사용하는 방법은 아래와 같습니다.

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

const Counter = () => {
  const [counter, setCount] = useState(0);

  const increment = () => {
    setCount(counter + 1);
  };
  const decrement = () => {
    if (counter > 0) {
      setCount(counter - 1);
    }
  };

  return (
    <View style={styles.container}>
      <Text>현재 카운트: {counter}</Text>
      <Button title="증가" onPress={increment}></Button>
      <Button
        title="감소"
        onPress={decrement}
        disabled={counter === 0}
      ></Button>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default Counter;

---

2. useEffect

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

const DataFetcher = () => {
  const [data, setData] = useState(null);

  // 컴포넌트가 마운트될 때 데이터 가져오기
  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch("https://api.example.com/data");
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, []);

  return (
    <View>
      <Text>{data ? JSON.stringify(data) : "로딩 중..."}</Text>
    </View>
  );
};
export default DataFetcher;

---

 

 

GitHub - Koras02/react-native-bloging: https://thinky.tistory.com/category/Mobile/React%20Native