useFormState와 useFormStatus

useFormState와 useFormStatus

로그인이나 회원가입 같은 부분에서 Form을 통해 처리를 하곤 한다. 이때 아이디나 비밀번호가 비어있으면 에러 메시지를 알려줘야 한다. 

그럴 때 useFormState, useFormStatus를 사용하면 편하다. 하지만 이 기능은 아직 실험적인 기능이긴 하다.

useFormState

https://react.dev/reference/react-dom/hooks/useFormState

useFormState – React

 

-예시 코드

import { useFormState } from "react-dom";

async function increment(previousState, formData) {
  return previousState + 1;
}

function StatefulForm({}) {
  const [state, formAction] = useFormState(increment, 0);
  return (
    <form>
      {state}
      <button formAction={formAction}>Increment</button>
    </form>
  )
}

• useState와 유사하게 사용 가능
• state는 값, formAction은 실행할 함수(increment)이고 useFormState(실행 시킬 함수, 기본값)을 두면 됨
• 즉, Form에서 사용하는 데이터를 조작할 수 있다.

useFormStatus

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

useFormStatus – React

 

-예시 코드

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>
  );
}

• useFormStatus는 ReactQuery와 유사하게 사용이 가능
• status 안에 pending, data, method, action이 들어있음
• 즉, 진행 상태에 대해서 파악할 수 있다.