[React Hook Form] React Hook Form 공부 - 8 (FormValues 항목에 배열이 있는 경우) [7/25 study]

React Hook Form 공부 - 8

 

FormValues 항목에 배열이 있는 경우

우리가 얻고자 하는 폼에 관련 정보가 유사성이 있으면 객체 말고 배열로 받고 싶은 경우가 있습니다. 

전화번호가 대표적인데요. 

유선, 무선 전화번호를 phoneNumbers라는 항목으로 배열로 지정하여 코드를 작성해 보겠습니다.

 

type FormValues = {
  username: string;
  email: string;
  social: {
    github: string;
    twitter: string;
  };
  phoneNumbers: string[];
};

export default function MyForm() {
  const {
    register,
    control,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>({
    defaultValues: {
      username: "IU",
      email: "",
      social: {
        github: "",
        twitter: "",
      },
      phoneNumbers: ["", ""],
    },
  });
...
...
}

 

위와 같이 phoneNumbers라는 배열을 지정했고, 배열에 저장할 정보의 개수는 빈 따옴표 개수로 정해집니다. 

우리는 2개만 지정했네요. 이제 JSX 코드를 볼까요? 

코드의 간결함을 위해 social과 phoneNumbers 부분에서 errors 관련 부분은 빼겠습니다.

 

<p>{errors.email?.message}</p>

<label htmlFor="github">Github</label>
<input type="text" id="github" {...register("social.github")} />

<label htmlFor="twitter">Twitter</label>
<input type="text" id="twitter" {...register("social.twitter")} />

<label htmlFor="wired">Wired phone</label>
<input type="text" id="wired" {...register("phoneNumbers.0")} />  // .0 으로 접근

<label htmlFor="wireless">Wireless</label>
<input type="text" id="wireless" {...register("phoneNumbers.1")} /> // .1 로 접근

<button>Submit</button>

 

"phoneNumbers.0" 과 "phoneNumbers.1" 처럼 ".0", ".1" 방식으로 배열의 첫 번째 항목, 두 번째 항목을 지정했습니다. 

실행 결과는 아래와 같습니다. 크롬 콘솔 창 내용입니다.

 

Form submitted.
{username: 'IU', email: '', social: {…}, phoneNumbers: Array(2)}
email: ""
phoneNumbers: (2) ['02', '010'] // 배열 항목에 phoneNumbers 값이 잘 들어가 있네요.
social: {github: 'aaa', twitter: 'aaa'}
username: "IU"
[[Prototype]]: Object