[React Native] useState Hook으로 상태 관리하기

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

 

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

컴포넌트에 버튼을 하나 만들고 Box 컴포넌트를 숨기고 다시 보여주는 기능을 구현해 보았다.

 

useState 사용하기

 

App.js

import React, {useState} from 'react';
import {SafeAreaView} from 'react-native';
import Box from './components/Box';

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

  return (
      <SafeAreaView>
        <Box rounded={true} size="large" color="pink" />
      </SafeAreaView>
  )
}

export default App;

 

Box.js

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

function Box({rounded, size, color}) {
    return (
        <View
            style={[
                styles.box,
                rounded && styles.rounded,
                sizes[size],
                {
                    backgroundColor : color,
                },
            ]}
        />
    );
}

const styles = StyleSheet.create({
    box: {
        width : 64,
        height : 64,
        backgroundColor : 'black',
    },

    rounded: {
        borderRadius : 16,
    },

    small: {
        width : 32,
        height : 32,
    },

    medium: {
        width : 64,
        height : 64,
    },

    large: {
        width : 128,
        height : 128,
    },
});

const sizes = {
    small : styles.small,
    medium: styles.medium,
    large: styles.large,
};

export default Box;

 

useState 함수 사용

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

 

visible은 상태 값을 가르킨다. setVisible은 상태 값을 변경할 수 있는 함수이다. 만약 setVisible(true)를 호출하면 visible 값이 true로 바뀐다. 그리고 useState 함수에 넣어준 파라미터는 상태 값의 초깃값이다.

 

위 코드에서 사용한 문법은 배열 구조 분해 할당이다.

 

 

const people = ['John', 'Jake', 'Jane'];
const john = people[0];
const jake = people[1];
const jane = people[2];

 

 

이 코드를 배열 구조 분해 할당을 사용해서 밑 코드 처럼 변경 할 수 있다.

 

const people = ['John', 'Jake', 'Jane'];
const [john, jake, jane] = people;

 

useState가 호출 되면 두 가지 원소가 들어있는 배열을 반환하는데, 그 배열에는 첫 번째 원소에 상태 값, 두 번째 원소에 상태를 업데이트 하는 함수가 들어있다. 그리고 우리가 배열 구조 분해 문법을 통해 각 원소들을 배열에서 편하게 추출해 사용하는 것이다.

 

근데 솔직히 배열 구조 분해 할당.. 안 익숙해서 그런 것 같기도 하지만 불편해

 

useState를 사용해서 boolean 형태 값 뿐만 아니라 숫자, 객체, 배열 등의 형태를 가진 상태를 관리할 수 있다.

 

Hook의 규칙

1. Hook은 컴포넌트의 최상위 레벨에서만 사용해야한다. 조건문, 반복문 또는 중첩 함수에서 호출하면 안 된다. 만약 함수의 흐름 중간에 리턴을 하는 경우, Hook은 함수가 리턴 되기 전에 사용되어야 한다.

 

2. 여러 Hook을 사용해서 직접 Hook을 만들 수 있다. 이것을 커스텀 Hook이라고 한다. 

 

3. Hook은 커스텀 Hook 또는 함수 컴포넌트에만 사용할 수 있다. 클래스에서는 사용이 불가능하다.

 

Button 컴포넌트 사용하기

button 컴포넌트의 이름은 title Props를 통해 설정하기

 

App.js 코드 바꿔줌

import React, {useState} from 'react';
import {Button, SafeAreaView} from 'react-native';
import Box from './components/Box';

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

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

export default App;

 

+ 조건부 렌더링 구현

 

app.js 코드 또 바꿔주기

import React, {useState} from 'react';
import {Button, SafeAreaView} from 'react-native';
import Box from './components/Box';

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

  return (
      <SafeAreaView>
          <Button title="토글" onPress={onPress} />
          {visible ? <Box rounded={true} size="large" color="pink" /> : null}
      </SafeAreaView>
  )
}

export default App;

 

토글 버튼을 누르면 Box 컴포넌트가 생겼다가 사라졌다가 하도록 변경했다.

 

&& 연산자를 사용해서 구현할 수도 있다.

 

{visible && <Box rounded={true} size="large" color="pink" />}

 

이게 훨씬 편할 것 같다!!