기본 유효성 검사 패턴과 제출 처리

목표: 폼에 간단한 검사를 추가하고 제출을 원활하게 처리합니다.

• 필수 필드
• 길이 검사
• 기본 이메일 패턴

일반적인 흐름:

• onSubmit에서 event.preventDefault()를 호출합니다
• 유효성 검사를 실행합니다
• 오류가 없으면 계속 진행합니다(전송하거나 성공 메시지 표시)
• 오류가 있으면 상태를 설정하고 메시지를 표시합니다

작게 시작합니다:

• 필수: value.trim().length > 0
• 길이: 최소 N자
• 이메일: 초보자라면 value.includes("@")처럼 기본적인 검사를 사용합니다

preventDefault()로 제출을 처리하고, 유효성 검사를 실행한 뒤 상태에 저장한 인라인 오류를 표시합니다.

오류 안내 개선 팁:

• 필드 가까이에 메시지를 표시합니다
• 텍스트를 짧고 도움이 되게 유지합니다
• 필요할 때만 제출을 비활성화합니다

다음은 피하십시오:

• 제출할 때 preventDefault()를 잊는 것
• 유효성 검사 상태와 비제어형 입력을 함께 사용하는 것
• 초기부터 너무 큰 정규 표현식을 사용하는 것. 간단하게 시작하고 나중에 개선하십시오

복습: event.preventDefault()로 새로 고침을 방지하고, 간단한 검사(필수/길이/이메일)를 실행한 뒤, 필드 옆에 상태에서 가져온 오류를 표시합니다.