useActionState

 

🎯 useActionState란 무엇일까?

React에서는 상태(state)라는 개념이 중요해요.
상태는 화면에 보여주는 데이터의 현재 상태라고 생각하면 돼요.

예를 들어:

• 카운터 앱에서 숫자가 올라가는 것도 상태
• 로그인 폼에서 입력하는 이메일과 비밀번호도 상태

그럼 useActionState는 뭐냐고요?
**"어떤 행동(action)에 따라 상태를 관리할 때 쓰는 도구"**라고 생각하면 돼요.

 

🍔 햄버거 가게 이야기로 알아보기

여러분이 햄버거 가게를 운영한다고 상상해볼까요? 🍔

• 손님이 와서 햄버거 주문을 합니다. (이게 액션!)
• 이때 가게는 주문받은 메뉴를 확인하고, 주문 리스트에 추가하겠죠? (이게 상태 업데이트!)

여기서 중요한 포인트는 주문(액션)에 따라 가게 상태(주문 리스트)가 변한다는 것이에요.
이걸 React의 **useActionState**를 이용해서 표현할 수 있어요.

 

🛠️ 예시 코드로 쉽게 이해하기

React 코드로 조금 더 구체적으로 보여드릴게요:

 

import React, { useActionState } from 'react';

function BurgerShop() {
  // useActionState를 이용해서 주문 상태를 관리해요
  const [orders, addOrder] = useActionState(
    (prevOrders, newOrder) => [...prevOrders, newOrder], // 상태를 업데이트하는 로직
    [] // 초기 상태는 빈 주문 리스트
  );

  // 주문을 추가하는 함수
  const handleOrder = (menu) => {
    addOrder(menu); // addOrder를 호출하면 새 주문이 상태에 반영돼요!
  };

  return (
    <div>
      <h1>🍔 햄버거 가게</h1>
      <button onClick={() => handleOrder('치즈버거')}>치즈버거 주문</button>
      <button onClick={() => handleOrder('불고기버거')}>불고기버거 주문</button>
      <button onClick={() => handleOrder('감자튀김')}>감자튀김 주문</button>

      <h2>📝 주문 리스트</h2>
      <ul>
        {orders.map((order, index) => (
          <li key={index}>{order}</li> // 주문된 메뉴를 화면에 보여줘요
        ))}
      </ul>
    </div>
  );
}

export default BurgerShop;

 

🔎 코드에서 무슨 일이 일어나는 걸까?

1. useActionState:
   • 첫 번째 인자는 상태를 어떻게 업데이트할지를 결정하는 함수예요.
     여기서는 기존 주문 리스트에 새 주문을 추가하는 로직이죠.
   • 두 번째 인자는 초기 상태예요. 처음에는 아무 주문도 없으니까 []로 비어있어요.
2. addOrder:
   • 버튼을 클릭하면 handleOrder가 호출되고, addOrder를 통해 상태가 업데이트돼요.
   • 예를 들어 "치즈버거"를 클릭하면 상태가 ['치즈버거']로 바뀌죠.
3. 상태 업데이트 결과:
   • 주문 리스트가 화면에 자동으로 업데이트돼요!

 

🧩 한마디로 정리하자면!

useActionState는 어떤 행동(액션)에 따라 상태를 업데이트할 때 사용하는 도구예요.
햄버거 가게에서 **주문(액션)**이 들어오면 **주문 리스트(상태)**가 바뀌는 것처럼 말이죠!