폼 필드 배열(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;