React 19의 useTransition을 활용한 비동기 상태 업데이트와 UI 반응성 향상

useTransition 은 시간이 걸리는 비동기 작업(예: 데이터 요청, 상태 업데이트)을 낮은 우선순위로 처리하여 UI가 멈추지 않고 계속 반응하여 사용자 경험을 향상시킬 수 있습니다.

예제 코드: useTransition을 사용한 비동기 상태 업데이트

1. App.jsx

import { useState, useTransition } from "react";
import Item from "./Item.jsx";
import Total from "./Total.jsx";
import { updateQuantity } from "./data.js";

function App() {
  const [quantity, setQuantity] = useState(1);
  const [isPending, startTransition] = useTransition();

  const updateQuantityAction = async (newQuantity) => {
    startTransition(async () => {
      const savedQuantity = await updateQuantity(newQuantity);
      startTransition(() => {
        setQuantity(savedQuantity);
      });
    });
  };

  return (
    <div className="min-h-screen bg-gray-100 p-6">
      <h1>Checkout</h1>
      <Item action={updateQuantityAction} />
      <hr />
      <Total quantity={quantity} isPending={isPending} />
    </div>
  );
}

export default App;

왜 useTransition 두 번 사용했는가?

• 한 번 : 서버 요청이 오래 걸릴 경우, 요청 중간에 발생한 모든 상태 변경이 순차적으로 UI에 반영되면서 깜박일 수 있습니다.
• 두 번 : 요청 중간에 상태 변경이 UI에 반영되지 않고, 마지막 요청 결과만 UI에 반영되므로 여러 번 요청이 발생하거나 서버 요청이 오래 걸리는 경우 더 안정적이고 UI가 깔끔하게 유지됩니다.

2. Item.jsx

export default function Item({ action }) {
  const handleChange = (event) => {
    const newValue = Number(event.target.value);
    action(newValue);
  };

  return (
    <div className="item">
      <span>Eras Tour Tickets</span>
      <label htmlFor="name">Quantity: </label>
      <input type="number" onChange={handleChange} defaultValue={1} min={1} />
    </div>
  );
}

3. Total.jsx

const intl = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
});

export default function Total({ quantity, isPending }) {
  return (
    <div className="total">
      <span>Total:</span>
      <span>
        {isPending ? "🌀 Updating..." : `${intl.format(quantity * 9999)}`}
      </span>
    </div>
  );
}

4. data.js

export async function updateQuantity(newQuantity) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(newQuantity);
    }, 2000);
  });
}

• startTransition 함수는 updateQuantity 비동기 함수와 setQuantity 상태 업데이트를 래핑하여 낮은 우선순위로 실행합니다.
• isPending 상태는 useTransition의 상태로, 비동기 작업이 진행 중임을 표시합니다. 이로 인해 사용자는 상태 변경이 진행 중인 동안에도 다른 UI와 상호작용할 수 있습니다.

일반 이벤트와 React 19 useTransition 활용 차이점

• 일반 : 빠르게 여러 번 업데이트하면, 각 요청마다 즉시 여러번 업데이트 되므로 UI 깜빡입니다.
• React19 : 빠르게 여러 번 업데이트하더라도 깜빡이지 않고 최종 요청이 완료된 후에 반영됩니다. 요청이 진행되는 동안에도 계속 업데이트할 수 있습니다.