[react-dom 번역] useFormStatus

출처: https://react.dev/reference/react-dom/hooks/useFormStatus

---

개요

useFormStatus는 마지막 폼 제출의 상태 정보를 제공하는 React Hook입니다. 폼 제출 중(pending) 여부, 제출 데이터, HTTP 메서드, action 함수 등 다양한 상태를 확인할 수 있습니다.

const { pending, data, method, action } = useFormStatus();

---

Reference

useFormStatus()

부모 <form>의 마지막 제출 상태 정보를 반환합니다. 반드시 <form> 내부에서 렌더링되는 컴포넌트에서만 호출해야 합니다.

• 파라미터: 없음
• 반환값: status 객체
  • pending: boolean. true면 부모 form이 제출 중임을 의미합니다.
  • data: FormData 인터페이스를 구현한 객체. 제출 중인 데이터. 제출 중이 아니거나 부모 form이 없으면 null.
  • method: 'get' 또는 'post'. 부모 form의 HTTP 메서드.
  • action: 부모 form의 action prop에 전달된 함수 참조. URI나 action 미지정 시 null.

Caveats(주의사항)

• 반드시 <form> 내부에서 호출해야 하며, form 외부에서 호출하면 status 정보가 제공되지 않습니다.
• 같은 컴포넌트 내에서 form을 렌더링하고 useFormStatus를 호출하면 status.pending이 항상 false입니다. 반드시 form 내부의 하위 컴포넌트에서 호출해야 합니다.
• 여러 form이 중첩된 경우, 가장 가까운 부모 form의 상태만 추적합니다.

---

사용법

폼 제출 중 상태 표시하기

import { useFormStatus } from "react-dom";

function Submit() {
  const { pending } = useFormStatus();
  return <button type="submit" disabled={pending}>{pending ? "Submitting..." : "Submit"}</button>;
}

function Form({ action }) {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

• 제출 중에는 버튼이 비활성화되고, "Submitting..." 텍스트가 표시됩니다.

제출 데이터/메서드/액션 확인하기

function Status() {
  const { pending, data, method, action } = useFormStatus();
  return (
    <div>
      {pending && data && <p>제출 중: {data.get('username')}</p>}
      <p>메서드: {method}</p>
      <p>action: {String(action)}</p>
    </div>
  );
}

---

트러블슈팅

status.pending이 항상 false인 경우

• useFormStatus는 반드시 form 내부의 하위 컴포넌트에서 호출해야 합니다. 같은 컴포넌트 내에서 form을 렌더링하고 useFormStatus를 호출하면 pending이 항상 false입니다.

// 잘못된 예시
function Form() {
  const { pending } = useFormStatus(); // ❌
  return <form action={submit}></form>;
}

// 올바른 예시
function Submit() {
  const { pending } = useFormStatus(); // ✅
  return <button disabled={pending}>제출</button>;
}
function Form() {
  return <form action={submit}><Submit /></form>;
}

---

참고 및 주의사항

• useFormStatus는 부모 form의 상태만 추적합니다. 여러 form이 중첩된 경우 가장 가까운 form만 추적합니다.
• form 외부에서 호출하면 status 정보가 제공되지 않습니다.

---

출처: https://react.dev/reference/react-dom/hooks/useFormStatus