React 폼, fp-ts로 더 우아하게!
by DD
3년 전
조회수 10
React 폼 데이터 관리의 문제점을 지적하고, fp-ts를 활용한 해결책 제시
fp-ts의 pipe, Either 등을 활용하여 검증 로직을 함수형으로 구현
커스텀 훅을 통해 폼 상태 관리 코드의 재사용성과 가독성을 향상시킴
React 폼 관리의 문제점
React에서 폼 데이터 관리는 useState를 사용하여 구현한다. 구체적으로 각 입력 필드마다 상태와 오류 메시지를 관리해야 하며, 검증 로직 중복 발생한다. 따라서 코드 중복과 유지보수 어려움을 야기한다.
fp-ts를 활용한 함수형 검증
fp-ts의 pipe와 Either를 활용하여 검증 로직을 함수형으로 구현한다. 구체적으로, fromPredicate를 통해 검증 결과를 Either 타입으로 래핑한다. 따라서 코드 재사용성을 높이고, 타입 안정성을 확보한다.
커스텀 훅으로 폼 관리 간소화
커스텀 훅을 통해 폼 상태 관리 로직을 추상화한다. useStateWithValidator 훅은 입력값, 오류 상태, 검증 함수를 캡슐화한다. 결과적으로 코드 중복 감소 및 가독성 향상을 통해 폼 개발 생산성을 높인다.
