Server Action 결과와 pending 상태를 사용자에게 전달합니다.
useActionState는 action의 이전 결과와 FormData를 받아 새 상태를 반환하고 pending 여부를 제공합니다. 필드 오류와 성공 메시지를 서버 검증 결과에서 표시할 수 있습니다.
반환 상태는 직렬화 가능하고 사용자에게 공개해도 되는 정보만 포함합니다.
pending 동안 중복 제출을 막되 진행 상태를 텍스트로도 알립니다.
서버 예외의 내부 메시지와 스택을 그대로 사용자에게 반환하지 마세요.
로컬 프로젝트에서 확인해보세요성공 상태와 입력별 오류 객체를 구분하세요.
"use client";
import { useActionState } from "react";
async function save(previous, formData) {
await new Promise((r) => setTimeout(r, 300));
const title = String(formData.get("title") ?? "").trim();
return title.length >= 2
? { message: "저장했습니다" }
: { message: "두 글자 이상 입력하세요" };
}
export default function Page() {
const [state, action, pending] = useActionState(save, { message: "" });
return (
<main>
<form action={action}>
<input name="title" aria-label="제목" />
<button disabled={pending}>{pending ? "저장 중..." : "저장"}</button>
</form>
<p aria-live="polite">{state.message}</p>
</main>
);
}