React 19 Form Actions — 폼 처리의 새로운 패러다임

Form Actions

"use server";

async function createPost(formData: FormData) {
  const title = formData.get("title") as string;
  const content = formData.get("content") as string;
  
  await db.post.create({ data: { title, content } });
  revalidatePath("/posts");
  redirect("/posts");
}

클라이언트에서 사용

function PostForm() {
  const [state, action, isPending] = useActionState(createPost, null);
  return (
    <form action={action}>
      <input name="title" required />
      <textarea name="content" />
      <button disabled={isPending}>
        {isPending ? "저장 중..." : "저장"}
      </button>
    </form>
  );
}