로그인 폼 만들기
매 렌더마다 폼이 다시 만들어지지 않도록 폼 인스턴스는 컴포넌트 밖에 둡니다. 값 구조는 화면 배치가 아니라 요청 페이로드에 맞춥니다. 그런 다음 프레임워크 어댑터로 필드를 연결합니다. 아래 조각은 CreateForm, React useForm, loginSchema, emailSchema, signIn이 이미 정의되어 있다고 가정합니다. 실행 가능한 기반은 완전한 빠른 시작을 사용하세요.
const form = new CreateForm({
defaultValues: { email: '', password: '', remember: false },
schema: loginSchema,
validateOn: ['blur', 'submit'],
});
function Login() {
const { form: controller, useField, useRegister, useFormState } = useForm(form);
const email = useField({ name: 'email', schema: emailSchema });
const password = useRegister({ name: 'password', type: 'password' });
const remember = useRegister({ name: 'remember', type: 'checkbox' });
const state = useFormState();
return <form onSubmit={(event) => { event.preventDefault(); void controller.submit(signIn); }} />;
}특정 필드의 메시지가 폼 전체 스키마보다 더 구체적이라면 field-local 스키마를 사용하세요. 마지막 관문은 submit으로 처리합니다. 로그인에 성공한 뒤 현재 값을 새로운 깨끗한 기준으로 삼아야 할 때만 reset(controller.getValues())를 호출하세요.
점검 목록
배포 전에는 라벨과 접근성 속성이 마크업에 있는지, 스키마 오류가 필드 주변과 필요한 요약 영역에 표시되는지, 중첩 값에 튜플 경로를 쓰는지, 동적 목록 구조 변경이 배열 명령으로만 일어나는지 확인하세요. 이렇게 해야 제품 요구가 커져도 폼 동작을 예측하기 쉽습니다.