React 19 Actions, 새로운 상태 관리 useTransition

React 19에서의 데이터 변경과 상태 업데이트는 더욱 간편해졌습니다. 예를 들어, 사용자가 이름 변경 폼을 제출하면 API 요청을 보내고 응답을 처리해야 합니다. 이전에는 useState를 사용해 직접 상태를 관리해야 했지만, 이제 Actions를 통해 더 효율적으로 관리할 수 있습니다.

 

새로운 기능: useTransition을 활용한 상태 관리

React 19에서는 useTransition 훅을 사용해 비동기 함수와 트랜지션을 처리하여 자동으로 펜딩 상태, 에러, 폼, 낙관적 업데이트를 관리할 수 있습니다.

// Actions를 사용한 펜딩 상태 관리
function UpdateName() {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();
  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      }
      redirect("/path");
    });
  };
  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>Update</button>
      {error && <p>{error}</p>}
    </div>
  );
}

 

Actions의 주요 기능

React 19의 Actions는 다음과 같은 기능을 자동으로 관리합니다:

• 펜딩 상태: 요청 시작 시 자동으로 펜딩 상태를 설정하고 최종 상태 업데이트 시 리셋합니다.

• 낙관적 업데이트: useOptimistic 훅을 통해 요청 중 사용자에게 즉각적인 피드백을 제공합니다.

• 에러 처리: 요청 실패 시 에러를 표시하고 낙관적 업데이트를 원래 값으로 자동 복원합니다.

• 폼 처리: <form> 요소에 action과 formAction 프롭을 전달하여 폼 제출과 리셋을 자동으로 처리합니다.