useState Hook으로 상태 관리하기

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

React에는 use로 시작하는 다양한 함수가 내장되어 있는데, 이 함수들은 Hook이라고 부른다. Hook을 사용해서 상태 관리, 최적화, 컴포넌트 작동 흐름 관리 등 다양한 기능을 구현할 수 있다. 그 중에서 useState는 상태 값을 관리하는 함수이다.

 

useState를 사용해서 상태를 적용해보자.

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

function Box() {
  return (
    <View style={styles.box}>
      <Text>UseState 예제</Text>
    </View>
  );
}

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

  return (
    <View>
      {visible ? <Box /> : null}
      <Button title="토글" onPress={onPress} />
    </View>
  );
}

const styles = StyleSheet.create({
  box: {
    borderWidth: 4,
    borderColor: 'black',
    width: 200,
    height: 200,
  },
});

export default UseStateTest;

코드를 하나하나 보면서 정리해보겠다.

 

const [visible, setVisible] = useState(true);

useState가 호출되면 두 가지 원소가 들어있는 배열이 반환되는데, 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 업데이트하는 함수가 들어있다. 이를 visible과 setVisible 변수에 할당한 것이다.

이 문법은 이 전 글에서 소개한 객체 구조 분해 할당과 같은 개념이다. 배열을 구조 분해하여 할당한 것이다.

그리고 useState 함수에 넣어준 파라미터는 상태 값의 초깃값이다.

 

const onPress = () => {
  setVisible(!visible);
};

onPress 함수는 위에서 선언한 setVisible 함수를 사용해 visible값을 반전 시키는 함수이다. 이를 Button 태그에 onPress 속성에 적용해 클륵 시 onPress 함수가 실행되도록 한다.

 

{visible ? <Box /> : null}

visible 값이 true일때 Box 컴포넌트가 나타나고 true가 아니면 나타나지 않도록 설정하였다.

 

 

 

그럼 시뮬레이터를 실행해 버튼을 클릭해보자.

처음 실행했을때 visible의 초깃값이 true이기 때문에 Box 컴포넌트가 나타난다.

토글 버튼을 클릭하면 visible의 초깃값이 false로 반전됬기 때문에 Box 컴포넌트가 사라진다.