안녕하세요. 프론트엔드 개발 관련 포스팅 입니다.
온라인으로 무언가를 신청할 때, 신청서를 작성하게 됩니다.
개발하면서 신청서 양식을 만드는 것은 아마 많은 분들이 경험해보셨을 것 같습니다.
이번에는 신청 폼을 만들면서 고려해야할 사항들에는 어떤 것들이 있을지 알아보겠습니다.
기왕 만드는거 처음부터 리스크를 고려하면 좋으니까요
Form 데이터 관리
Form 데이터를 가져오고 손쉽게 업데이트하기 위해서는 객체("{}") 형태로 관리할 필요가 있습니다.
그러나 객체의 경우 순서가 보장되지 않기 때문에 객체 Key 값들의 순서를 배열("[]") 형태로 가지고 있어야합니다.
예를 들어 Profile 정보를 입력하는 폼을 만든다고 가정해보겠습니다.
const profile = {
lastName: '',
firstName: '',
age: '',
phoneNo: '',
address: '',
employmentType: '',
}
const PROFILE_KEYS = [
lastName,
firstName,
age,
phoneNo,
address,
employmentType,
]
위와 같은 형식으로 데이터와 순서를 모두 관리합니다.
이때 또 고려해야할 부분이 있습니다. 데이터 중에서 필수값 임의값이 나눠지거나 특수한 UI 로 처리해야하는 경우 어떻게 관리하는 것이 좋을지 고려해봐야합니다.
또한 UX 에 따라서 데이터가 업데이트되는 타이밍, 데이터를 초기화 해야하는 타이밍을 고려해야합니다. ( 이부분은 UX 별로 천차만별이라 자세하게 이야기하지 않습니다. )
유효성 검사 ( Validation )
유효성 검사는 폼을 모두 입력하고 나서 정상적인 값들이 입력됐는지 테스트합니다.
그리고 정상적이지 못한 값이 있을 때 알림 문구를 띄워주게 됩니다. 때문에 알림 문구를 데이터를 저장하는 구조가 필요합니다.
저는 문제가 있는 Key 와 그에 해당하는 문구를 매핑하여 invalidItems 객체로 만들었습니다.
const invalidItems = {
lastName: '이름을 입력해주세요',
firstName: '이름을 입력해주세요',
age: '나이를 입력해주세요',
phoneNo: '잘못된 번호 양식입니다',
address: '주소를 입력해주세요',
employmentType: '직업을 선택해주세요',
}
각각에 폼 UI 에서는 invalidItems 를 항상 참조하며, 해당 폼에 invalidItems 의 Key 가 존재할 경우 에러 UI 를 보여주도록 연동했습니다.
유효성 검사를 실시하는 타이밍
타이밍은 UX 에 따라서 굉장히 다양하게 나올 수 있습니다.
- onChange 나 onBlur 이벤트 발생시
- 최종 제출 버튼 클릭시
이는 유효성 검사를 어떻게 진행하냐에 따라 크게 달라질 것 같습니다.
제가 최근에 개발했던 프로젝트는 "최종 제출 버튼 클릭시" 유효성 검사를 진행했습니다. 때문에 에러 메시지가 떠있는 상태에서 값을 수정하더라도 에러메시지가 바로 없어지지 않았습니다.
또한, 유효성 검사는 FE 에서 할 수도 있고 BE 에서 할 수도 있습니다. 보통 서버에서는 기본적으로 유효성검사를 모두 진행하고, FE 에서는 최소한의 검사를 실시합니다. ( 필수값 누락이나 데이터 포맷 검사 등등 )
정리하자면 위와 같은 흐름이 됩니다.
또한 에러메시지를 띄우고 나서 Focus 이벤트를 호출하는 것이 일반적이기 때문에, Profile Key 값과 동일한 ID 를 각 컴포넌트마다 부여해주는 것이 좋습니다. 그렇다면 위에서부터 반복문을 돌면서 InvalidItems 에 존재하는 Key 값의 경우 id 를 기준으로 querySelect 를 할 수 있습니다. 그리고 포커스 이벤트를 호출하게 됩니다.
실제 Form 입력에 쓰이는 태그들 ( Input, Select, Textarea 등등.. ) 에 대해서는 다음에 또 포스팅해보도록 하겠습니다.
감사합니다~!