[React] useFormStatus

useFormStatus

useFormStatus 마지막 form 제출의 상태 정보를 제공하는 Hook이다.

예시 코드

import { useFormStatus } from "react-dom";
import action from './actions';

function Submit() {
  const status = useFormStatus();
  return <button disabled={status.pending}>Submit</button>
}

export default function App() {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

상태 정보를 얻으려면 Submit 컴포넌트가 form 내에서 렌더링 되어야 합니다. hook은 form이 제출되고 있는지 알려주는 pending과 같은 정보를 반환한다.

위의 예에서 Submit은 이 정보를 사용하여 form이 제출되는 동안 button 클릭을 비활성화한다.

매개변수

useFormStatus는 매개변수를 사용하지 않는다.

반환값

• pending: true이거나 false값을 갖는다. form이 제출중이라면 true이고 그렇지 않으면 flase이다.
• data: 상위 form이 제출하는 데이터가 포함된 FormData 인터페이스를 구현하는 개체이다.
• method: 'get' 또는 'post'의 문자열 값. 이는 상위 form이 GET 또는 POST HTTP 메서드로 제출하는 여부를 나타낸다. 기본적으로 form은 GET 메서드를 사용하며 메서드 속성으로 지정할 수 있다.
• action: 상위 form의 action prop에 전달된 함수에 대한 참조다. 상위 form이 없으면 null이다. action prop에 URI값이 제공되거나 지정된 action prop이 없으면 status.action은 null이 된다.

주의사항

• useFormStatus Hook은 form 내부에 렌더링되는 컴포넌트에서 호출되어야 한다.
• useFormStatus는 상위 form에 대한 상태 정보만 반환한다. 동일한 컴포넌트나 하위 컴포넌트에서 렌더링된 form에 대한 상태정보를 반환하지 않는다.

사용법

form 제출 중 pending 상태 표시
form이 제출되는 동안 pending 상태를 표시하려면 form에 렌더링된 컴포넌트에서 useFormStatus Hook을 호출하고 반환된 pending 속성을 사용할 수 있다.

아래에서는 pending 속성을 사용하여 form이 제출 중임을 나타낸다.

예시코드

import { useFormStatus } from "react-dom";
import { submitForm } from "./actions.js";

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

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

export default function App() {
  return <Form action={submitForm} />;
}

제출되는 form 데이터 읽기

useFormStatus에서 반환된 상태 정보의 data 속성을 사용하여 사용자가 제출하는 데이터를 표시할 수 있다.

아래 코드에는 사용자가 사용자 이름을 요청할 수 있는 form이 있다. useFormStatus를 사용하여 요청한 사용자 이름을 확인하는 임시 상태 메시지를 표시할 수 있다.

UsernameForm.js

import {useState, useMemo, useRef} from 'react';
import {useFormStatus} from 'react-dom';

export default function UsernameForm() {
  const {pending, data} = useFormStatus();

  return (
    <div>
      <h3>Request a Username: </h3>
      <input type="text" name="username" disabled={pending}/>
      <button type="submit" disabled={pending}>
        Submit
      </button>
      <br />
      <p>{data ? `Requesting ${data?.get("username")}...`: ''}</p>
    </div>
  );
}

App.js

import UsernameForm from './UsernameForm';
import { submitForm } from "./actions.js";
import {useRef} from 'react';

export default function App() {
  const ref = useRef(null);
  return (
    <form ref={ref} action={async (formData) => {
      await submitForm(formData);
      ref.current.reset();
    }}>
      <UsernameForm />
    </form>
  );
}

간단 정리

• useFormStatus를 사용하여 form 제출의 상태를 쉽게 관리할 수 있다.
• form 내부에 렌더링되는 컴포넌트에서 호출해야 한다.
• 상위 form에 대한 상태정보만 반환한다.

React useFormStatus 공식 문서