[ReactNative] 리액트네이티브 상태관리 useState

useState

---

1. 개요

 

state는 컴포넌트 내부에서 생성되고, 값을 변경할 수 있다.

이를 이용하여 컴포넌트의 상태를 관리할 수 있다. 

상태(state)란 컴포넌트에서 변화할 수 있는 값을 나타내며, 상태가 변하면 리렌더링(re-rendering) 된다.

 

상태를 관리해야 하는 컴포넌트는 반드시 class components를 사용해야 했지만,

리액트 16.8 버전 이후를 사용하는 리액트 네이티브 0.59 버전부터는 Hooks라는 것을 사용해

function components에서도 상태를 관리할 수 있게 되었다.

 

2. 함수형 컴포넌트를 이용하여 상태를 관리하는 법

 

useState는 function components에서 상태를 관리할 수 있도록 해준다.

const [state, setState] = useState(initialState)

useStates는 상태를 관리하는 변수(state)와 그 변수를 변경할 수 있는 세터함수(setState)를 배열로 반환한다. 

 

여기서 주의해야할 점은 상태변수(state)는 직접 변경하는 것이 아니라 세터함수(setState)를 이용해서 변경해야 한다.

 

예시코드

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import MyButton from './MyButton';

const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <View style={{ alignItems: 'center' }}>
      <Text style={{ fontSize: 30, margin: 10 }}>{count}</Text>
      <MyButton title="+1" onPress={() => setCount(count + 1)} />
      <MyButton title="-1" onPress={() => setCount(count - 1)} />
    </View>
   );
};

export default Counter;

 

useState 함수를 이용해서 숫자의 상태를 상태를 관리하는 변수(state)와

그 변수를 변경할 수 있는 세터함수(setState)를 만들고

count 초기값은 0으로 설정했다.

 

그리고 이전 페이지에서 만든 MyButton 컴포넌트를 이용해

현재 count 값에서 1씩 증가하는 +1 버튼, 1씩 감소하는 -1 버튼을 만들었다.