useFormStatus, useFromState, useActionState 비교

Next.js의 Form 관련 Hooks 비교

Next.js와 React에서 제공하는 폼 관련 Hooks들의 차이점과 사용법을 알아보겠습니다.

1. useFormStatus

가장 단순한 형태의 Hook으로, 폼의 제출 상태만을 추적합니다.

"use client";
import { useFormStatus } from "react-dom";

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button disabled={pending}>
      {pending ? "제출 중..." : "제출하기"}
    </button>
  );
}

• 용도: 폼 제출 중인지 여부만 확인
• 반환값: { pending }
• 특징: 가장 간단하고 가벼움

2. useFormState (이전 버전)

서버 액션의 상태를 관리하는 Hook입니다.

"use client";
import { useFormState } from "react-dom";

function Form() {
  const [state, formAction] = useFormState(serverAction, initialState);

  return (
    <form action={formAction}>
      {state?.error && <p>{state.error}</p>}
      <button type="submit">제출</button>
    </form>
  );
}

• 용도: 서버 액션 상태 관리
• 반환값: [state, formAction]
• 특징: React 18에서 주로 사용

3. useActionState (최신 버전)

React 19와 Next.js 최신 버전에서 제공하는 통합 상태 관리 Hook입니다.

"use client";
import { useActionState } from "react";

function Form() {
  const [state, formAction, isPending] = useActionState(serverAction, initialState);

  return (
    <form action={formAction}>
      {state?.error && <p>{state.error}</p>}
      <button disabled={isPending}>
        {isPending ? "제출 중..." : "제출하기"}
      </button>
    </form>
  );
}

• 용도: 서버 액션 상태 + 로딩 상태 통합 관리
• 반환값: [state, formAction, isPending]
• 특징: 가장 최신 버전에서 권장되는 방식

정리

1. 단순 로딩 상태만 필요할 때
   • useFormStatus 사용
2. 서버 액션 상태 관리가 필요할 때
   • React 18: useFormState
   • React 19/Next.js 최신: useActionState
3. 통합 상태 관리가 필요할 때
   • useActionState 사용 권장

주의사항

• 모든 Hook은 Client Component에서만 사용 가능
• form 요소 내부에서만 정상 작동
• Server Action과 함께 사용해야 함