useFormStatus();

 

 

useFormStatus()는 <form> 요소의 submit에 대한 상태 정보를 제공하는 react-dom Hook입니다.

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

 

useFormStatus()는 <form> 요소 안에서 사용해야합니다. 또한 'use client' 선언이 된 클라이언트 컴포넌트에서만 사용이 가능합니다.

이는 useFromStatus()가 부모인 <form> 요소의 submit 상태에 따라 비동기적으로 클라이언트 사이드의 UI를 변경할 것이기때문입니다.

'use client';

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

export default function App() {
  const status = useFormStatus();
  
  return (
    <form action={action}>
		<input type="text" id="name" name="name" />
		<button disabled={status.pending}>Submit</button>
    </form>
  );
}

useFromStatus() 사용의 예시. status.panding이 true일때 button이 disabled되게하여 Submit을 막는다.

 

 

useFromStatus의 propertie는 pending, data, method, action이 있습니다.

 

- pending: boolean입니다. true라면 부모 <form>의 submit이 대기 중임을 의미합니다. 그렇지 않다면 false를 return합니다.

- data: 부모 <form>이 submit한 데이터를 포함하는 FormData를 구현하는 객체입니다. 활성화된 submit이 없거나 부모 <form>이 없는 경우 null이 됩니다.

- method: 'get' 또는 'post'인 문자열 값입니다. 부모 <form>이 GET 또는 POST 방식 중 어떤 방식을 사용하여 제출하였는지를 나타냅니다. 기본적으로 <form>은 GET 메서드를 사용합니다.

- action: 부모 <form>의 action 프로퍼티에 전달된 함수에 대한 참조입니다. 부모 <form>이 없는 경우 null입니다. 또한 부모 <form>의 action 프로퍼티 자리에 함수가 아닌 URI 값이 들어가 있거나 action 프로퍼티가 없는 경우 status.action은 null이 됩니다.