-
useFormStatus()Next.js 2024. 4. 22. 14:46
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> ); }
'Next.js' 카테고리의 다른 글
Next.js에서의 fetch api (0) 2024.05.05 CSR, SSG, ISR, SSR 차이점 정리 (0) 2024.01.05