하위 컴포넌트에서 제출 상태 읽기

`useFormStatus`는 부모 폼을 관찰해

제출 버튼처럼 폼 안쪽의 클라이언트 컴포넌트에서 useFormStatus()를 호출하면 가장 가까운 부모 폼의 제출 상태를 읽을 수 있어. pending뿐 아니라 현재 제출 데이터와 메서드, 연결된 액션도 확인할 수 있어.

필드	의미
`pending`	액션이 실행되는 동안 `true`야.
`data`	제출 중인 `FormData`야.
`method`	서버 액션 폼에서는 `'post'`야.
`action`	지금 호출하는 액션 참조야.

폼을 그리는 같은 컴포넌트에서는 읽을 수 없어

hook은 위쪽 부모가 제공하는 폼 context를 찾기 때문에, 바로 그 폼을 반환하는 컴포넌트 안에서 호출하면 대상이 없어. 버튼이나 상태 메시지를 별도 자식 컴포넌트로 빼고 그 안에서 불러.

범위를 좁혀야 상태도 정확해

한 화면에 폼이 여러 개라면 각 제출 버튼을 해당 폼 안에 둬. 전역 loading 상태 하나로 묶으면 관계없는 폼까지 잠기지만, form status는 실제 제출 중인 경계만 반응해.

제출 버튼, 진행 문구, 업로드 미리보기처럼 폼 상태를 소비하는 작은 자식을 만들어 가장 가까운 폼 context를 읽게 해. 같은 화면에 여러 폼이 있으면 각 버튼이 자기 부모의 pending에만 반응하는지 동시에 제출해 확인해. data를 표시할 때 민감한 필드는 로그나 화면에 남기지 마. 한 페이지에 폼을 둘 이상 놓고 하나만 제출해 봐. 각 버튼의 대기 상태와 제출 데이터가 자기 부모 폼에만 묶여야 해. 업로드처럼 진행 시간이 긴 폼에서는 취소나 재시도 뒤에도 다른 폼이 잠기지 않는지 확인해. 이 격리가 깨지면 사용자는 어느 작업이 진행 중인지 구분할 수 없어.

useFormStatus가 있다고 모든 비동기 상태를 여기에 넣는 건 아니야. 폼 제출 수명만 관찰하며, 폼 밖의 일반 서버 액션이나 여러 단계 작업의 진행률은 별도 상태 모델이 필요해. hook이 제공하는 범위와 제품 작업의 범위를 같다고 가정하지 마. 두 폼과 각자 다른 제출 버튼을 한 화면에 두고 한쪽만 느리게 만들어. 각 자식의 pending, data, method, action이 자기 부모만 가리키는지 확인하고, 같은 컴포넌트에서 hook을 잘못 불렀을 때 상태가 잡히지 않는 사례도 재현해.

Code

제출 버튼에서 폼의 pending 상태 읽기·tsx

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

function SubmitButton({ label }: { label: string }) {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending} className="rounded bg-blue-600 px-3 py-1 text-white">
      {pending ? 'Saving&hellip;' : label}
    </button>
  );
}

// 사용 — 반드시 폼 안에서
export function SaveForm({ action }: { action: (fd: FormData) => Promise<void> }) {
  return (
    <form action={action}>
      <input name="title" required />
      <SubmitButton label="Save" />
    </form>
  );
}

`useFormStatus`는 부모 폼을 관찰해

폼을 그리는 같은 컴포넌트에서는 읽을 수 없어

범위를 좁혀야 상태도 정확해

Code

External links

Exercise

Progress

댓글 0

useFormStatus는 부모 폼을 관찰해

폼을 그리는 같은 컴포넌트에서는 읽을 수 없어

범위를 좁혀야 상태도 정확해

Code

External links

Exercise

Progress

`useFormStatus`는 부모 폼을 관찰해