react-hook-form 사용 방법 1. 배열과 함께 사용 하기 useFieldArray

react-hook-form

react에서 form의 상태 관리를 더 편하게 도와주는 react-hook-form 사용시

동적으로 생성되는 배열 형태의 form 값을 사용 할때 useFieldArray라는 것을 사용합니다.

useFieldArray

({ control?: Control, name: string, keyName?: string = 'id' }) => object

function Test() {
  const { control, register } = useForm();
  const { fields, append, prepend, remove, swap, move, insert } = useFieldArray({
    control, // FormContext를 사용한다면 생략가능
    name: "test", // 배열 필드의 이름을 입력
    // keyName: "id", 기본값은 "id" 이고 변경 가능하다
  });

  return (
    {fields.map((field, index) => (
      <input
        key={field.id} // important to include key with field's id
        {...register(`test.${index}.value`)} 
      />
    ))}
  );
}

참고 : https://react-hook-form.com/api/usefieldarray