배열 필드

동적 목록에는 두 종류의 경로가 필요합니다. 배열 자체의 경로와 각 자식 필드의 경로입니다. 렌더 키는 form.array(path).keys()에서 받고, 자식 필드는 튜플 경로로 연결합니다.

const phones = form.array(['phones']);
const keys = phones.keys();
const bindings = useRegister(keys.map((_, index) => ({
  name: ['phones', index, 'value'] as const,
})));

return keys.map((key, index) => (
  <input key={key} {...bindings[index]} />
));

이 코드는 form과 useRegister가 이미 있는 React 컴포넌트 조각입니다. map 안에서 훅을 호출하지 말고 한 번의 훅 호출로 목록을 등록하세요. 사용자가 항목을 추가, 제거, 이동, 교환, 교체할 때는 서로 관련 없는 필드를 직접 쓰기보다 FormArray 명령을 호출하세요. 그래야 코어가 dirty, touched, modified, 포커스 상태, errors를 재배치할 수 있습니다. 렌더 키는 React가 잘못된 논리 항목에 DOM 노드를 재사용하지 않도록 돕고, 경로 인덱스는 현재 값 위치를 설명합니다.

점검 목록

배포 전에는 라벨과 접근성 속성이 마크업에 있는지, 스키마 오류가 필드 주변과 필요한 요약 영역에 표시되는지, 중첩 값에 튜플 경로를 쓰는지, 동적 목록 구조 변경이 배열 명령으로만 일어나는지 확인하세요. 이렇게 해야 제품 요구가 커져도 폼 동작을 예측하기 쉽습니다.