데브시스터즈, fp-ts로 복잡한 폼 상태 관리 우아하게 해결한 경험 공유

데브시스터즈 플랫폼셀의 백엔드 엔지니어 이창희가 fp-ts를 활용해 복잡한 폼 데이터 상태 관리를 우아하게 처리한 경험을 공유했다. 기존 React의 useState를 사용한 명령형 코드는 검증 필드가 늘어날수록 상태와 함수가 비례해 증가하고 코드 중복이 심화되는 문제가 있었다.

공통 로직 추출과 함수형 접근

이 문제를 해결하기 위해 입력값과 검증 함수만 외부에서 주입받고, 나머지 상태 갱신 및 검증 흐름은 공통 함수로 분리했다. fp-ts의 pipe와 Either 타입을 활용해 검증 함수 배열을 연결하고, 실패 시 오류 메시지를, 성공 시 입력값을 반환하는 구조를 구현했다.

이 방식은 react-hook-form 같은 라이브러리를 사용하지 않고도, 프로젝트에서 이미 사용 중인 fp-ts만으로 폼 검증 로직의 복잡도를 낮추고 재사용성을 높이는 데 기여했다.