[ react native ] useState Hook으로 상태 관리하는 방법

 

 

 

리액트에서 상태를 관리하는 가장 기본적인 방법으로 useState라는 함수를 사용하는 것이다.

 

 

리액트에는 use로 시작하는 다양한 함수가 내장되어 있는데 이 함수들을 Hook이라고 부른다.

 

 

Hook을 사용하여 상태 관리, 최적화, 컴포넌트 작동 흐름 관리 등 다양한 기능을 구현할 수 있다.

그 중에서 useState는 상태 값을 관리하는 함수이다.

 

 

 

 

const App = () => {
  const [count, setCount] = useState(0);
  const onIncrease = () => setCount(count + 1);
  const onDecrease = () => setCount(count - 1);
  return (
    <SafeAreaView style={style.full}>
      <Counter count={count} onIncrease={onIncrease} onDecrease={onDecrease} />
    </SafeAreaView>
  );
};

 

 

useState 함수는 위 예시처럼 다음과 같이 사용한다.

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

여기서 count 는 상태 값을 가리키며, setCount는 상태 값을 변경할 수 있는 함수를 의미한다.
setCount의 상태 값을 변경할 수 있는 함수명은 상황에 맞게 정해서 사용하면 된다.
상태 값을 의미하는 count 변수명도 수정 가능하다.

 

 

 

 

useState(0) 함수에 넣어준 파라미터 0의 값은 상태 값의 초깃값을 의미한다.

 

 

 

 

결국 useState가 호출되면 두 가지 원소가 들어있는 배열을 반환하는데,

그 배열에는 첫 번째 원소에 상태 값, 두 번째 원소에 상태를 업데이트 하는 함수가 들어있다.

useState를 사용해서 Boolean, 숫자, 객체, 배열 등의 형태를 가진 상태를 관리할 수도 있다.

 

 

 

 

function Counter({count, onIncrease, onDecrease}) {
  return (
    <View style={styles.wrapper}>
      <View style={styles.numberArea}>
        <Text style={styles.number}>{count}</Text>
      </View>
      <Button title="+1" onPress={onIncrease} />
      <Button title="-1" onPress={onDecrease} />
    </View>
  );
}

Counter 컴포넌트는 버튼 2개를 가지고 있으며 App컴포넌트에서 렌더링하고 있다.
App컴포넌트에서 Counter 컴포넌트의 각 버튼을 누를 때 useState 함수를 호출해서 숫자를 + 또는 - 해서 Counter 컴포넌트의 count로 그려주고
업데이트 된 Counter 컴포넌틀를 App컴포넌트에서 다시 렌더링 해주는 것이다.

 

 

 

 

코드를 모아서 다시 정리해보면 아래와 같다.

const App = () => {
  const [count, setCount] = useState(0);
  const onIncrease = () => setCount(count + 1);
  const onDecrease = () => setCount(count - 1);
  return (
    <SafeAreaView style={style.full}>
      <Counter count={count} onIncrease={onIncrease} onDecrease={onDecrease} />
    </SafeAreaView>
  );
};

function Counter({count, onIncrease, onDecrease}) {
  return (
    <View style={styles.wrapper}>
      <View style={styles.numberArea}>
        <Text style={styles.number}>{count}</Text>
      </View>
      <Button title="+1" onPress={onIncrease} />
      <Button title="-1" onPress={onDecrease} />
    </View>
  );
}

 

 

 

아래는 초깃값을 true로 설정한 useState의 값을 setVisible 상태 변경 함수를 호출하여

값의 반전을 줄 수 있는 방법으로 추후 본격적으로 프로젝트를 만들 때 유용할 것 같아 참고차 포스팅 해놓는다.

const App = () => {
  const [visible, setVisible] = useState(true);
  const onPress = () => {
    setVisible(!visible);
  };

  return (
    <SafeAreaView>
      <Button title="토글" onPress={onPress} />
      {visible && <Box rounded={true} size="large" color="green" />}
    </SafeAreaView>
  );
};

 

 

 

 

 

아래와 같이 해주면 조건 상관 없이 처음 설정한 초깃값의 반대로 값을 세팅할 수 있다.

    setVisible(!visible);