Form Action

HTML form과 서버 액션

useFormStatus와 useFormState를 폼 제출 경험, 대기 상태, 서버 응답 표시 기준으로 정리합니다.

HTML form

기본 제출 흐름 활용

FormData 이름과 서버 액션 파라미터가 맞아야 progressive enhancement가 깨지지 않습니다.

useFormStatus

버튼 상태 제어

pending은 중복 클릭을 막는 신호로 쓰고, 저장 완료 판정으로 쓰지 않습니다.

useFormState

결과 상태 반영

성공은 redirect나 revalidate로, 실패는 입력값 보존과 필드 오류로 이어집니다.

UX 기준

제출 상태 피드백

폼 처리는 저장 로직뿐 아니라 중복 제출 방지, 오류 표시, 성공 후 이동까지 함께 설계해야 완성됩니다.

폼 제출 처리 순서

입력name 속성이 없는 값은 FormData에 들어가지 않으므로 필드 이름을 먼저 맞춥니다.
제출서버 액션은 값 검증, 권한 확인, 저장, 캐시 갱신을 한 흐름으로 처리합니다.
피드백pending 동안 버튼을 비활성화하고 실패 이유는 같은 폼 근처에 남겨 재입력을 돕습니다.