[React Native] state

props는 부모 컴포넌트에서 받은 값으로 변경할 수 없다.

VS
state는 컴포넌트 내부에서 생성되고 값을 변경할 수 있으며 이를 이용해 컴포넌트 상태를 관리한다.

 

상태(state)란 컴포넌트에서 변화할 수 있는 값이다. 상태가 변하면 컴포넌트는 리렌더링 된다.

 

예전에는 클래스형 컴포넌트에서만 상태를 관리할 수 있었다. 하지만 리액트 16.8 버전, 리액트 네이티브 0.59 버전부터는 Hooks라는 것을 사용해 함수형 컴포넌트에서도 상태를 관리할 수 있다. 요즘 개발 추세는 함수형 컴포넌트 + Hooks 를 사용하는 것이다.

 

useState 사용하기

리액트 Hooks 중 useState는 함수형 컴포넌트에서 상태를 관리할 수 있도록 해준다.

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

useState는

1. 상태를 관리하는 변수와

2. 그 변수를 변경할 수 있는 세터(setter) 함수를

배열로 반환한다. 

 

상태 변수는 직접 변경하는 것이 아니라 useState 함수에서 반환한 세터 함수를 이용해야 한다.

useState 함수를 호출할 때 파라미터에 생성되는 상태의 초깃값을 전달할 수 있고, 초깃값을 전달하지 않으면 undefined로 설정되어 에러가 발생할 수 있으므로 항상 초기값을 설정하자.

 

예시 코드

import React, {useState} from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <View>
      <Text>{count}</Text>
      <Button title="+1" onPress={() => setCount(count + 1)} />
      <Button title="-1" onPress={() => setCount(count - 1)} />
    </View>
  );
};

• 상태를 관리할 변수 : count
• 상태를 변경할 수 있는 세터 함수 : setCount
• count의 초기값 : 0

여러 개의 useState 사용하기

컴포넌트에서 관리해야 하는 상태가 여러 개이면, 관리해야 하는 상태 수만큼 useState를 사용한다.

  const [count, setCount] = useState(0);
  const [double, setDouble] = useState(0);