[React] useState란? 여러 개의 state 변수 사용하기

useState란?

리액트의 useState는 함수형 컴포넌트에서 상태를 관리하기 위한 Hook 중 하나입니다.

 

Hook은 React 16.8버전에 새로 추가되었습니다. Hook은 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있습니다. 또한 Hook은 함수형 컴포넌트에서 상태를 지속적으로 추적하고 업데이트할 수 있도록 도와줍니다.

 

useState를 사용하면, 컴포넌트에서 변경 가능한 상태를 정의하고, 해당 상태가 변경될 때마다 리액트가 컴포넌트를 다시 렌더링하도록 설정할 수 있습니다.

useState는 다음과 같이 사용합니다

import React, { useState } from 'react';

function Example() {
  // useState를 사용해 "count" 상태를 초기값 "0"으로 설정합니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

위 코드에서, useState를 사용하여 count라는 상태를 초기값 0으로 설정합니다. 이 상태를 변경하려면, setCount 함수를 사용합니다. setCount 함수는 새로운 값을 받아 해당 상태를 업데이트하고, 리액트에게 컴포넌트를 다시 렌더링하도록 알립니다.

위 예제에서는 "Click me" 버튼을 클릭할 때마다 count 상태가 증가하고, 이를 화면에 출력합니다.

 

useState를 사용하면 여러 개의 상태를 관리할 수도 있으며, 객체나 배열과 같은 복잡한 데이터 구조를 다룰 수도 있습니다.

또한, 이 Hook을 사용하여 상태 값이 변경될 때 추가적인 동작을 수행하도록 설정할 수도 있습니다.

예를 들어, useEffect Hook을 사용하여 특정 상태가 변경될 때마다 API 호출을 수행하도록 설정할 수 있습니다.

 

여러 개의 state 변수

[something, setSomething]의 쌍처럼 state 변수를 선언하는 것은 유용합니다.

왜냐하면 여러 개의 변수를 선언할 때 각각 다른 이름을 줄 수 있기 때문입니다.

 

function ExampleWithManyStates() {
  // 여러 개의 state를 선언할 수 있습니다!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

 

위의 코드는 age, fruit, todos라는 지역 변수를 가지며 개별적으로 갱신할 수 있습니다.

function handleOrangeClick() {
    // this.setState({ fruit: 'orange' })와 같은 효과를 냅니다.
    setFruit('orange');
  }

여러 개의 state 변수를 사용하지 않아도 됩니다. 

state 변수는 객체와 배열을 잘 가지고 있을 수 있으므로 서로 연관있는 데이터를 묶을 수 있습니다.

하지만 클래스 컴포넌트의 this.setState와 달리 state를 갱신하는 것은 병합하는 것이 아니라 대체하는 것입니다.