[React Native] useState

useState

함수형 컴포넌트에서 상태를 관리할 수 있도록 하는것

예시

const [state, useState] = useState(initialState);

const [상태를 관리하는 변수, 변수를 변경할 수 있는 세터 함수] = useState(초기값);

코드

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

const Counter = () => {
  //숫자 상태를 관리할 count변수, 상태를 변경할 수 있는 setCount 세터 함수,  count의 초기값은 0
  const [count, setCount] = useState(0);
  return (
    <View style={{ alignItems: 'center' }}>
      <Text>{count}</Text>
      {/*UP button 클릭시 count값 1 증가*/}
      <Button title="up" onPress={() => setCount(count+1)} />
      {/*DOWN button 클릭시 count값 1 감소*/}
      <Button title="down" onPress={() => setCount(count-1)} />
    </View>
  );
};

export default Counter;

결과

초기상태

UP 버튼 클릭

DOWN 버튼 클릭