피드로 돌아가기
Dev.toFrontend
원문 읽기
UI 상태에서 분리한 Domain-driven Validation 설계를 통한 비즈니스 로직 재사용성 극대화
Form validation without Formik or React Hook Form: treat your rules as domain logic
AI 요약
Context
React Hook Form, Zod 등 라이브러리 중심의 Validation 설계로 인한 비즈니스 룰의 UI 종속성 심화. 동일한 검증 로직이 여러 컴포넌트에 중복 구현되며 유지보수 효율 저하 및 테스트 복잡도 증가 문제 발생.
Technical Solution
- ValidationRule 인터페이스 정의를 통한 검증 로직의 순수 TypeScript 클래스화
- AppException 클래스 도입으로 에러 메시지를 TranslationConfig 구조로 설계하여 다국어 처리 및 UI 계층 분리
- 검증 결과 반환 타입을 Boolean이 아닌 AppException 배열로 설정하여 다중 에러 상태의 유연한 처리 구현
- UI 프레임워크와 무관한 Pure TypeScript 도메인 레이어 구축을 통한 Backend 및 타 프레임워크 이식성 확보
- 컴포넌트 내 useState와 단순 핸들러만 사용하여 라이브러리 라이프사이클에 의한 불필요한 Re-render 제거
- 에러 객체에 고유 ID(예: car.vin.empty)를 부여하여 메시지 텍스트 변경과 무관한 안정적인 E2E 테스트 환경 구축
실천 포인트
- Validation 로직이 UI 컴포넌트나 외부 라이브러리 스키마에 정의되어 있는지 확인 - 동일한 검증 룰이 2곳 이상의 폼(Create/Edit/Import)에서 중복 사용되는지 검토 - 프레임워크를 제거한 상태에서 비즈니스 룰만 단독으로 Unit Test가 가능한 구조인지 점검 - 에러 메시지를 단순 문자열이 아닌 식별 가능한 ID 기반의 객체로 관리하는지 확인