선언적 폼 바인딩
프론트엔드
선언적 폼 바인딩
두줄요약
다이얼로그 수정 폼에서 useEffect 기반 수동 바인딩으로 발생한 상태 꼬임 문제를 정리했습니다. React Hook Form의 values로 선언적 동기화를 적용해 잔상과 레이스 컨디션을 줄였습니다.
문제 상황
- 다이얼로그 기반 수정 폼에서 비동기 상세 데이터와 폼 초기값 동기화가 어긋나는 문제
- 빠른 닫기/재오픈 시 이전 데이터 잔상, 상태 꼬임, 레이스 컨디션 발생
원인 분석
- useEffect와 setValue로 외부 Props를 수동 주입하는 명령형 바인딩 구조
- React 상태 배치 처리와 비동기 패칭 타이밍 불일치로 인한 시각적 잔상과 데이터 오염
- 필드 수 증가에 따른 초기화 로직 분산과 컴포넌트 비대화
해결 방법
- React Hook Form의 values 옵션으로 데이터 소스를 선언적으로 명시
- useEffect 제거와 함께 폼 상태를 라이프사이클에 맞춰 자동 동기화
- Form과 Field 컴포넌트로 입력 구조 단순화