상태 관리의 함정: '죽을 수 있는 Entity'로 해결하는 폼 아키텍처

Context

Redux-form의 Single Source of Truth 원칙 적용으로 폼 상태가 Store에 영구히 잔존하는 문제 발생. 모든 키 입력마다 전역 액션이 발생하여 대규모 폼에서 렌더링 성능 저하 초래. 휘발성 데이터인 폼 상태와 지속성 데이터인 애플리케이션 상태의 생명주기 불일치 문제 직면.

Technical Solution

• Formik과 React Final Form의 로컬 상태 관리 도입을 통한 Store 의존성 제거 및 렌더링 범위 국소화
• React Final Form의 FormSpy 구독 모델을 통해 필요한 필드만 선택적으로 업데이트하는 최적화 설계
• Inglorious Web의 폼 Entity 개념 도입으로 생성과 파괴가 명확한 생명주기 관리 체계 구축
• 폼 제출 완료 시 해당 Entity를 Store에서 즉시 제거하여 데이터 오염과 메모리 팽창 방지
• lit-html의 정밀한 DOM 업데이트 방식을 활용하여 가상 DOM 비교 과정 없는 저비용 렌더링 구현
• 복잡한 다단계 폼의 경우 단계별 독립 Entity 설계 또는 단일 Entity 내 상태 분기 전략 적용

Key Takeaway

상태 관리의 핵심은 데이터의 위치(Global vs Local)가 아닌 데이터의 생명주기(Alive vs Dead)를 명확히 정의하는 설계 원칙에 있음.