LARGE-SCALE INPUT
대규모 동적 폼
수백 개 필드의 갱신 범위를 나눴습니다.
직접 맡은 일입력 아키텍처 · 상태 경계 · 렌더링 최적화
문제
임상 데이터 입력 화면에는 수백 개의 동적 필드와 반복 행이 놓입니다. 사용자 입력, 서버의 계산 결과, 복원된 값이 같은 필드에 들어오기 때문에 렌더링 범위와 상태의 소유권을 함께 정해야 했습니다.
접근과 구현
실제 행 높이를 측정하는 가상화와 필드별 구독으로 갱신 범위를 좁혔습니다. 입력값은 React Hook Form, 서버 데이터는 React Query, 공유 편집 상태는 Jotai가 맡도록 나눠 각 변경이 영향을 주는 범위를 명확히 했습니다.
구현의 세부 판단과 기여 범위
- 구현에서 중요했던 점
- 저장할 때는 변경된 항목만 전송합니다. 행 순서를 재구성하는 반복 문항은 문항 전체를 보내도록 예외를 뒀습니다. 자동 계산 항목을 함께 보냈던 첫 구현은 실제 요청에서 중복을 확인한 뒤 줄였습니다.
- 직접 기여 · 협업
- 입력 구조와 상태 경계, 저장·복구 흐름을 직접 설계하고 구현했습니다. 키보드 이동과 표 붙여넣기는 팀이 확장한 영역입니다.