useFormStatus

 

🎯 useFormStatus란 무엇인가요?

**useFormStatus**는 폼(form)의 상태를 확인하고 처리할 수 있도록 도와주는 React의 훅이에요.

• 예를 들어, "폼이 제출 중인지", "에러가 발생했는지" 같은 상태를 확인할 수 있죠.
• 주로 서버로 데이터를 제출하는 작업과 함께 사용돼요.

 

🍕 비유로 이해하기: 햄버거 가게 주문 상황 🍔

여러분이 햄버거 가게에서 주문을 받는 직원이라고 생각해 보세요.

1. 주문 시작
   • 손님이 메뉴를 고르고 주문을 시작해요.
   • 이때 **"주문이 진행 중입니다"**라는 상태를 확인할 수 있어요.
2. 주문 처리 중
   • 주방에서 햄버거를 만드는 동안 **"주문이 처리 중이에요"**라는 상태를 보여줍니다.
3. 주문 완료
   • 햄버거가 완성되면 **"주문이 완료되었습니다!"**라고 알려줄 수 있죠.

React의 **useFormStatus**는 바로 이 **주문 상태(진행 중, 완료, 에러 등)**를 관리하고 보여줄 수 있게 도와주는 역할이에요.

 

🛠️ useFormStatus 사용법

그럼 useFormStatus를 코드로 어떻게 사용할 수 있는지 함께 알아볼게요.
React 서버 액션을 예제로 보여드릴게요.

 

1. 서버 액션으로 데이터 제출하기

React 서버 컴포넌트에서 폼 데이터를 서버에 제출할 때 useFormStatus를 사용할 수 있어요.

서버 액션 함수 만들기

'use server';

export async function submitFormAction(formData) {
  const name = formData.get('name');

  // 2초 동안 서버에서 처리 중이라고 가정
  await new Promise((resolve) => setTimeout(resolve, 2000));

  if (!name) {
    throw new Error('이름을 입력해 주세요!');
  }

  console.log('서버에 전송된 데이터:', name);
}

설명:

• submitFormAction 함수는 서버에서 데이터를 처리하는 역할을 해요.
• await로 비동기 처리를 흉내내서 폼이 제출되는 동안 시간이 걸리는 상황을 만들어 볼게요.

 

2. useFormStatus를 사용한 폼 컴포넌트

이제 useFormStatus를 사용해서 폼 상태를 표시해볼게요.

'use client';

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

function SubmitButton() {
  const { pending } = useFormStatus(); // 폼 상태 확인

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

export default function MyForm() {
  return (
    <form action={submitFormAction}>
      <label>
        이름: <input name="name" />
      </label>
      <SubmitButton />
    </form>
  );
}

🔍 코드 설명

1. useFormStatus 훅
   • useFormStatus는 폼의 상태를 확인할 수 있는 훅이에요.
   • pending: 폼이 제출 중이면 true, 그렇지 않으면 false를 반환합니다.
2. SubmitButton 컴포넌트
   • useFormStatus를 사용해서 버튼의 상태를 변경해요.
   • 폼이 제출 중이면 버튼에 **"제출 중..."**이라고 표시하고, 클릭을 비활성화합니다.
3. action 속성
   • form 태그의 action 속성에 서버 액션 함수 submitFormAction을 연결합니다.
   • 폼이 제출되면 서버로 데이터를 전송하고 처리합니다.
4. 결과
   • 폼이 제출 중일 때 버튼은 비활성화되고 **"제출 중..."**이라는 문구가 표시됩니다.
   • 제출이 완료되면 버튼이 다시 활성화돼요.

 

🚀 useFormStatus를 사용하면 좋은 점

1. 제출 상태를 쉽게 관리
   • 폼이 제출 중인지, 완료됐는지 상태를 간단하게 확인할 수 있어요.
2. UX(사용자 경험) 개선
   • 폼이 제출되는 동안 버튼을 비활성화하거나 로딩 메시지를 표시해서 사용자에게 피드백을 줄 수 있어요.
3. 서버 액션과 함께 사용
   • 서버로 데이터를 제출하는 작업과 useFormStatus를 결합하면 서버와의 상태 동기화가 훨씬 쉬워져요.

 

🌟 한 줄 요약

**useFormStatus**는 폼이 제출 중인지, 완료됐는지 등 상태를 확인해서 화면에 보여줄 수 있도록 도와주는 React 훅이에요.

 

🎉 마무리

React의 **useFormStatus**는 폼을 사용할 때 **"지금 폼이 어떤 상태인지"**를 더 쉽게 관리하고 사용자에게 알려줄 수 있는 기능이에요.
특히 서버 액션과 함께 사용하면 코드가 깔끔해지고 사용자 경험이 좋아지죠!