useFormStatus()

useFormStatus()

 

이 hook은 자신의 부모 components를 보고, 가장 가까운 form을 찾으려고 한다.

그렇기 때문에 useFormStatus는 form이 작성된 components에서는 사용할 수 없다.

쉽게 말해 form 이 작성된 components가 아니라 useFormStatus hook을 사용할 자식 요소 안에서 사용해야 한다.

 

가장 가까운 부모 form을 찾아서 그 부모 form의 상태를 알려준다.

form이 pending인지 아닌지 알려주므로 유용하다 (disabled에 pending 값을 넣음)

 

//부모 component


export default function Login() {
  return (
  	<form action={action}>
      <FormButton text="Login" />
    </form>
  );
}

 

//자식 component

"use client";

import { useFormStatus } from "react-dom";

interface Props {
  text: string;
}

export default function FormButton({ text }: Props) {
  const { pending } = useFormStatus();
  return (
    <button
      disabled={pending}
    >
      {pending ? "Loading..." : text}
    </button>
  );
}