[Legacy][React] react-hook-form 배열 다루기 - 3

[React] react-hook-form 배열 다루기 - 3

이전 게시글에서 react-hook-form에서 배열 다루는 방법을 알아보았다. 그러나 원시타입의 경우 다루기가 힘들었는데 이러한 문제점을 해결할 수 있는 방법이 있긴하다. 첫 게시글에서 확인해본 useForm hook을 사용하여 다루면 된다. 간단하게 알아보자. (참고 : 이전 게시글에서 소개한 초기값, 출력과 같은 부분 설명은 제외함.)

useForm으로 배열 다루기

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

const initValue = {
  numbers: [""]
};

const Basic = () => {
  // #1 watch, setValue, getValues
  const { control, watch, setValue, getValues, handleSubmit } = useForm({
    mode: "onSubmit",
    defaultValues: initValue
  });

  const numbers = watch("numbers") || [];
  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        control={control}
        name="numbers"
        render={() => {
          return numbers.map((number, index) => {
            const onHandleChange = e => {
              const tmp = getValues("numbers");
              const result = tmp.map((item, _index) => {
                if (_index === index) return e.target.value;
                return item;
              });
              setValue("numbers", result);
            };
            return (
              <div key={index}>
                <input value={number} onChange={onHandleChange} />
              </div>
            );
          });
        }}
      />

      <button
        onClick={() => {
          const tmp = getValues("numbers") || [];
          setValue("numbers", [...tmp, ""]);
        }}
      >
        추가
      </button>
      <input type="submit" />
    </form>
  );
};

export default Basic;

간단한 코드라 읽어보면 금방 이해가 될 것이다.

#1 watch, setValue, getValues

watch, setValue, getValues 함수들은 이름 그대로 어떤 값을 보고, 어떤 값을 변경하고, 어떤 값을 가져온다. 그러나 약간의 차이는 있으니 홈페이지를 참고하여 확인해보도록 하자 (힌트를 주자면 렌더링). 홈페이지 참고 : 이동하기)

 

위 함수 3개를 사용하여 일반 배열처럼 사용하여 이전 게시글에서 확인했던 불편함을 없앨 수 있었다. 그러나 이 방법이 최선이고 정답이라는 보장은 할 수 없으니 참고만 하시길 ...

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.