useState란?

useState는 React의 함수형 컴포넌트에서 상태(state)를 관리할 수 있도록 해주는 훅이다. 클래스형 컴포넌트의 this.state 또는 this.setState와 유사하다.

 

useState의 기본 사용법

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

• state : 현재 상태 값
• setState : 상태 값을 업데이트할 수 있는 함수
• initialState : 상태 초기 값

예시

import { useState } from 'react';

const MyComponent = () => {
  // 상태 변수 'count'와 상태를 변경하는 함수 'setCount' 선언
  const [count, setCount] = useState(0); // 초기값은 0

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>카운트 증가</button>
    </div>
  );
};

상태 값 count는 setState 함수를 통해 업데이트 된다. setState는 상태 값만 업데이트할 뿐만 아니라 업데이트된 상태에 대한 동작을 수행할 수도 있다. 이전 상태를 기반으로 새로운 상태를 계산할 수 있도록, 상태 값을 인수로 전달받을 수 있다. 또한 이는 비동기적으로 실행된다. 즉, 상태가 업데이트된 직후 바로 변경된 값을 확인할 수 없을 수도 있다. 

배열이나 객체의 상태를 업데이트할 때 불변성을 지켜야 한다. 즉, 업데이트할 때는 새로운 배열/객체를 생성해야 한다.

예시 : 상태가 객체인 경우

import { useState } from 'react';

const MyComponent = () => {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  const updateName = () => {
    setUser(prevUser => ({ ...prevUser, name: 'Jane' }));
  };

  return (
    <div>
      <p>이름: {user.name}</p>
      <p>나이: {user.age}</p>
      <button onClick={updateName}>이름 변경</button>
    </div>
  );
};

위 코드에서 ...prevUser을 사용해 이전 객체의 값을 복사한 뒤 name을 업데이트하는 방식으로 새로운 객체를 생성한다.

 

useState의 특징

1. 상태는 useState를 이용해 함수형 컴포넌트에서 관리된다.

2. 컴포넌트가 리렌더링될 때마다 기존 상태 값을 유지한다.

3. 상태 값이 렌더링의 트리거다. 즉, 상태 값이 업데이트되면 해당 상태가 사용된 컴포넌트는 리렌더링 된다.

예시 : 상태 배열 관리

import { useState } from 'react';

const MyComponent = () => {
  const [items, setItems] = useState([1, 2, 3]);

  const addItem = () => {
    setItems(prevItems => [...prevItems, items.length + 1]);
  };

  return (
    <div>
      <ul>
        {items.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={addItem}>항목 추가</button>
    </div>
  );
};