프론트엔드
폼 데이터를 우아하게 관리하는 방법
두줄요약
fp-ts의 Either와 조합 가능한 검증 규칙으로 React 폼 검증을 구성했습니다. 커스텀 훅으로 값·오류 상태와 제출 전 검증 코드를 간결하게 관리했습니다.
문제 상황
- React
useState기반 폼에서 필드별 입력값·오류 상태·검증·이벤트 핸들러의 반복 증가 - 필수 입력 등 공통 검증 규칙의 필드별 중복과 복잡한 폼 확장 부담
구조와 흐름
fp-ts의Either,pipe,Predicate로 검증 성공값과 오류 메시지 모델링- 작은 검증 규칙 함수 조합과 공통
validate함수로 필드별 검증기 구성 useStateWithValidator커스텀 훅으로 값·오류 상태·제출 전 검증 호출 캡슐화
선택 이유
- 프로젝트에서 사용 중인
fp-ts를 활용한 함수형 폼 상태 관리 - 검증 규칙의 작은 단위 분리와 여러 필드 간 재사용성 확보
적용해볼 점
- 입력 변화와 제출 시점 모두에서 동일한 검증기 재사용
- 단일 오류 메시지 표시 구조를 다중 오류 표시 방식으로 확장 가능
