HTML 폼 검증의 활용 부족

HTML 폼 검증의 저조한 활용

• HTML 폼은 강력한 검증 메커니즘을 가지고 있지만, 많이 사용되지 않음. 많은 사람들이 이에 대해 잘 알지 못함. 이는 설계상의 결함 때문일 수 있음.

속성, 메서드, 그리고 프로퍼티

• 빈 입력을 방지하기 위해 required 속성을 추가할 수 있음.
• 입력에 제약을 추가하는 방법은 세 가지가 있음:
  • 특정 type 속성 값 사용: "email", "number", "url"
  • "pattern" 또는 "maxlength" 같은 다른 입력 속성 사용
  • setCustomValidity DOM 메서드 사용: 임의의 검증 로직을 생성하고 복잡한 경우를 처리할 수 있는 가장 강력한 방법임.

명령형 API의 미묘함

• setCustomValidity API는 메서드로만 제공되어 사용하기 불편함.
• 예를 들어, 입력이 비어 있을 때 폼 제출을 막기 위해 required 속성과 같은 기능을 구현할 수 있음.
• 초기 렌더링 시 입력이 비어 있으면 유효하지 않도록 설정해야 함.

보일러플레이트 문제

• 초기 값을 검증하는 방식이 번거로움.
• 검증 로직이 onChange 핸들러와 초기 렌더링 단계에서 중복됨.
• useRef + useLayoutEffect + onChange 조합은 복잡함.

누락된 부분

• custom-validity 속성이 필요함.
• 선언적 프레임워크에서 입력 검증을 강력하게 정의할 수 있음.

비동기 검증의 힘

• 사용자 이름 입력이 사용되지 않은 경우에만 유효해야 하는 경우를 처리할 수 있음.
• 서버에 비동기 호출이 필요하며, 중간 상태가 필요함.

구현

• verifyUsername 함수를 사용하여 사용자 이름의 고유성을 확인함.
• useQuery를 사용하여 서버 요청 상태를 관리함.
• customValidity 속성을 사용하여 비동기 검증 흐름을 설명함.

비밀번호 확인 폼

• 입력된 비밀번호를 반복 입력해야 하는 폼을 구현함.
• 두 입력 필드가 일치하는지 확인하여 검증함.

결론

• setCustomValidity는 다양한 검증 요구를 충족할 수 있음.
• 강력한 API가 진정한 힘을 제공함.
• HTML 스펙에 이 기능이 추가되기를 기대함.

GN⁺의 정리

• HTML 폼 검증은 강력하지만 잘 활용되지 않음. 이는 API의 복잡성 때문일 수 있음.
• setCustomValidity 메서드는 복잡한 검증 로직을 처리할 수 있는 강력한 도구임.
• 비동기 검증과 같은 복잡한 시나리오를 처리할 수 있는 방법을 제시함.
• 이 글은 개발자들이 HTML 폼 검증을 더 잘 활용할 수 있도록 돕는 유용한 정보를 제공함.