React Hook Form - useFieldArray

useFieldArray란?

폼 필드 배열(Form Field Array)은 동적으로 생성되는 폼 필드의 그룹입니다. 사용자가 필요에 따라 폼 필드를 추가하거나 제거할 수 있는 기능을 제공합니다.

주의할점 form fileld 배열의 이름과 resgiter에 등록하는 이름이 같아야 한다.

사용자가 여러 개의 이메일 주소를 입력할 수 있는 동적인 폼을 구현

import React from 'react';
import { useForm, useFieldArray } from 'react-hook-form';

function EmailForm() {
  const { register, control, handleSubmit } = useForm();
  const { fields, append, remove } = useFieldArray({
    control,
    name: 'emails', // 폼 필드 배열의 이름
  });

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input
            {...register(`emails.${index}.address`)} // 필드의 이름 설정
            defaultValue={field.address} // 기본 값 설정
          />
          <button type="button" onClick={() => remove(index)}>
            Remove
          </button>
        </div>
      ))}
      <button type="button" onClick={() => append({ address: '' })}>
        Add Email
      </button>
      <button type="submit">Submit</button>
    </form>
  );
}

export default EmailForm;