서버 액션 (in Client Components)

서버 액션을 서버 컴포넌트가 아닌 클라이언트 컴포넌트에서 호출해서 로딩 상태를 설정하거나 에러를 핸들링할 수 있다.

useActionState?

useActionState는 React 19버전 부터 추가된 서버 액션의 상태를 관리하는 React 훅이다.
이를 활용하면 서버 액션의 실행 상태(로딩, 성공, 실패)를 손쉽게 관리할 수 있으며, 폼 유효성 검사 및 에러 핸들링을 클라이언트 컴포넌트에서 처리하는 것이 가능하다.

---

useActionState 기본 사용법

1. 서버 액션 함수 정의

서버 액션은 "use server" 디렉티브를 사용하여 정의해야 한다.
아래 예제는 addUser라는 서버 액션을 정의하여 사용자 데이터를 추가하는 코드이다.

// app/actions.ts
"use server";

import { revalidatePath } from "next/cache";

export async function addUser(prevState: any, formData: FormData) {
  const name = formData.get("name") as string;

  if (!name) {
    return { error: "이름을 입력해주세요." }; // 에러 처리
  }

  await db.user.create({ data: { name } });
  revalidatePath("/"); // 최신 데이터 반영

  return { success: "사용자가 추가되었습니다!" };
}

2. useActionState를 사용한 클라이언트 컴포넌트 구현

클라이언트 컴포넌트에서 useActionState를 활용하여 서버 액션을 호출하고, 상태를 관리한다.

"use client";

import { useActionState } from "react";
import { addUser } from "@/app/actions";

export default function UserForm() {
  const [state, formAction, isPending] = useActionState(addUser, null); // 서버 액션 연결

  return (
    <form action={formAction}>
      <input type="text" name="name" placeholder="이름 입력" />
      <button disabled={isPending} type="submit">추가</button>

      {state?.error && <p style={{ color: "red" }}>{state.error}</p>}
      {state?.success && <p style={{ color: "green" }}>{state.success}</p>}
    </form>
  );
}

✅ useActionState(addUser, null) → addUser 서버 액션을 실행하는 상태를 관리
✅ 서버에서 반환된 error 또는 success 메시지를 클라이언트에서 표시
✅ formAction을 action 속성으로 설정하여 자동으로 서버 액션 호출

---

useActionState의 주요 기능

기능	설명
서버 액션 호출	서버에서 직접 함수 실행 가능
상태 관리	실행 중, 성공, 실패 상태를 관리 가능
폼 자동 핸들링	<form> 태그의 action 속성에 연결 가능
클라이언트에서 에러 처리	서버에서 반환한 에러 메시지를 UI에 표시 가능