[React 19] 공식문서 톺아보기 - React DOM Hook

• Study• 수십명이 읽음

목차

useFormStatus에 대해 공부하였습니다.

useFormStatus

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

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

상태 정보를 제공받기 위한 조건

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>
  );
}
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> 내부에 렌더링해야 합니다.
  • <form> 내부에서 useFormStatus를 호출하여 여러 상태값에 대하여 접근할 수 있습니다.
    • pending: 제출 중이라는 것을 의미
    • data: FormData 인터페이스를 구현한 객체로, 상위 <form>이 제출하는 데이터를 포함합니다.
    • method: 'get' 또는 'post' 중 하나의 문자열 값
    • action: 상위 <form>의 action Prop에 전달한 함수의 레퍼런스
      • Prop에 URI 값이 제공되었거나 action prop를 지정하지 않았을 경우에는 status.action은 null

주의

  • useFormStatus Hook은 <form> 내부에 렌더링한 컴포넌트에서 호출해야 합니다.
  • useFormStatus는 동일한 컴포넌트에서 렌더링한 <form>에 대한 상태 정보를 반환하지 않습니다.
  • useFormStatus는 현재 진행 중인 폼 제출의 상태만 추적합니다. 제출이 완료되면 React는 data를 자동으로 초기화합니다.
읽어주셔서 감사합니다