react-hook-form을 사용하여 배열 형태 input 사용

배열형태의 Input을 처리하는 방식을 정리해 둔다.

 

ChatGPT 예시

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

function MyForm() {
  // react-hook-form의 useForm 훅 사용
  const { control, handleSubmit, register, formState: { errors } } = useForm({
    defaultValues: {
      users: [{ name: "" }] // 기본값으로 하나의 입력 필드를 넣음
    }
  });

  // useFieldArray 훅을 사용하여 동적으로 필드 추가 및 제거
  const { fields, append, remove } = useFieldArray({
    control,
    name: "users" // 배열 필드 이름
  });

  // 폼 제출 함수
  const onSubmit = data => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <h2>사용자 목록</h2>
      
      {/* 배열 필드를 반복해서 렌더링 */}
      {fields.map((item, index) => (
        <div key={item.id}>
          <label>사용자 이름 {index + 1}</label>
          <Controller
            name={`users[${index}].name`} // 배열 인덱스 기반으로 input name 설정
            control={control}
            render={({ field }) => <input {...field} />}
          />
          <button type="button" onClick={() => remove(index)}>제거</button>
        </div>
      ))}

      <button type="button" onClick={() => append({ name: "" })}>추가</button>
      
      <button type="submit">제출</button>
    </form>
  );
}

export default MyForm;

 

필자 코드

...

import { RentalHouseDetailItem, RentalHouseItem, Area, Facility, RentalHouseSchedule } from 'interface/RentalHouseInterface';

...

interface HookFormData extends RentalHouseItem {
  areas: Area[];
  facilities: Facility[];
  schedules: RentalHouseSchedule[];

  exposureTypes?: number[];
  jsonData?: {
    basic?: {
      url?: string;
    };
  };
}

...


const RentalHouseDetailPage: React.FC<RentalHouseDetailPageProps> = (props) => {
  const context = useContext(BaseContext);
  const request = useRequest();

  const initFacilities = useRef(null);

  const {
    handleSubmit,
    watch,
    formState: { errors },
    control,
    reset,
    setValue,
  } = useForm<HookFormData>({
    defaultValues: {},
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'schedules',
  });
  
  ...
  
  return (
          {watch('schedules')?.map((schedule, index) => (
            <div key={index}>
            <div>{schedule.title}</div>
            <div>
              <NInput
                control={control}
                name={`schedules[${index}].beginDt`}
                rules={{ required: '시작일자는 필수 입력입니다.' }}
                placeholder="시작일자를 입력해주세요."
                maxLength={20}
              />
            </div>
            </div>
          ))}
  )
};