Form Actions 예제

💡 Form Actions 패턴

// 1. 액션 함수 정의 (prevState를 받음)
async function submitForm(prevState, formData) {
    // 유효성 검사
    const errors = validate(formData);
    if (errors) {
        return { success: false, errors };
    }
    
    // 서버 작업 수행
    await saveToDatabase(formData);
    return { success: true, message: '저장 완료!' };
}

// 2. useActionState로 상태 관리
const [state, formAction, pending] = useActionState(submitForm, {
    success: false,
    message: ''
});

// 3. 폼에서 사용
<form action={formAction}>
    <input name="email" />
    <button disabled={pending}>
        {pending ? '처리 중...' : '제출'}
    </button>
</form>