[Next] useFormStatus,useFormState

useFormStatus란

 

React의 훅으로, <form>의 상태 정보를 읽을 수 있게 해줍니다. 이 훅은 폼 내부에 있는 컴포넌트에서만 사용 가능합니다.

주요 기능

• pending: 폼이 제출 중인지 여부를 불리언(boolean) 값으로 알려줍니다. true일 경우, 폼 제출 작업이 진행 중임을 의미합니다.
• data: FormData 객체로, 제출된 폼의 데이터를 담고 있습니다.
• method: 폼의 method 속성 값(예: 'get', 'post')을 알려줍니다.
• action: 폼의 action 속성 값 또는 action 함수를 알려줍니다

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? '제출 중...' : '제출'}
    </button>
  );
}

function MyForm() {
  const action = async (formData) => {
    // 폼 제출 로직 (서버에 데이터 전송 등)
    await new Promise(resolve => setTimeout(resolve, 2000));
    console.log(formData);
  };

  return (
    <form action={action}>
      <input type="text" name="name" />
      <SubmitButton />
    </form>
  );
}

 

---

useFormState란

 

useFormState는 두 가지 값을 반환합니다.

1. state: 폼 액션 함수가 반환하는 현재 상태 값입니다. 초기 상태는 훅에 인수로 전달한 초기값으로 설정됩니다.
2. dispatch: 폼 액션 함수를 실행시키는 함수입니다. 이 함수는 form의 action prop에 직접 전달됩니다.

const [state, dispatch] = useFormState(action, initialState);

 

 

• action: 폼이 제출될 때 실행될 함수입니다. 이 함수는 formData 객체를 첫 번째 인수로, 이전 상태를 두 번째 인수로 받습니다. 그리고 새로운 상태를 반환해야 합니다.
• initialState: state의 초깃값입니다.