[React] form submit과 관련된 useFormStatus 훅

useFormStatus는 마지막 폼 제출의 상태 정보를 제공하는 Hook입니다

form 이 pending 상태일 때 다른 이벤트를 주고 싶을 때 사용하는 용도로 사용됩니다.

(예 : submit 버튼의 텍스트를 submitting... 으로 바꾼다던지 )

 

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

 

 

tanstack query 의 useQuery 에서 보던 형태이다.

 

• pending: 불리언 값입니다. true라면 상위 <form>이 아직 제출 중이라는 것을 의미합니다. 그렇지 않으면 false입니다.
  
  
• data: FormData 인터페이스를 구현한 객체로, 상위 <form>이 제출하는 데이터를 포함합니다. 활성화된 제출이 없거나 상위에 <form>이 없는 경우에는 null입니다.
  
  
• method: 'get' 또는 'post' 중 하나의 문자열 값입니다. 이 프로퍼티는 상위 <form>이 GET 또는 POST HTTP 메서드를 사용하여 제출되는지를 나타냅니다. 기본적으로 <form>은 GET 메서드를 사용하며 method 프로퍼티를 통해 지정할 수 있습니다.
  
  
• action: 상위 <form>의 action prop에 전달한 함수의 레퍼런스입니다. 상위 <form>이 없는 경우에는 이 프로퍼티는 null입니다. action prop에 URI 값이 제공되었거나 action prop를 지정하지 않았을 경우에는 status.action은 null입니다.

 

주의사항

 

• useFormStatus Hook은 <form> 내부에 렌더링한 컴포넌트에서 호출해야 합니다.
• useFormStatus는 오직 상위 <form>에 대한 상태 정보만 반환합니다. 동일한 컴포넌트나 자식 컴포넌트에서 렌더링한 <form>의 상태 정보는 반환하지 않습니다

function Form() {
  // 🚩 `pending`은 절대 true가 되지 않습니다
  // useFormStatus는 현재 컴포넌트에서 렌더링한 폼을 추적하지 않습니다
  const { pending } = useFormStatus();
  return <form action={submit}></form>;
}

 

대신 <form> 내부에 위치한 컴포넌트에서 useFormStatus를 호출합니다.

function Submit() {
  // ✅ `pending`은 Submit 컴포넌트를 감싸는 폼에서 파생됩니다
  const { pending } = useFormStatus(); 
  return <button disabled={pending}>...</button>;
}

function Form() {
  // `useFormStatus`가 추적하는 <form>입니다
  return (
    <form action={submit}>
      <Submit />
    </form>
  );
}

 

 

 

https://ko.react.dev/reference/react-dom/hooks/useFormStatus#pending-is-never-true

useFormStatus – React