React Hook Form - 2

React-Hook-Form에서 사용한 것들을 정리해보겠다!

• Hook-Form 코드

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

 const {
    control,
    watch,
    getValues,
    setValue,
    handleSubmit,
    resetField,
    formState: { errors },
  } = useForm({
    defaultValues: {
    },
  });
  
const { fields, append, remove } = useFieldArray({
    name: "name",
    control,
  });
  

control

• Hook-Form과 연동하기 위한 것이라고 생각하면 된다.
  기본적인 html태그가 아닌 라이브러리와 같이 사용할때, register의 역할을 한다고 생각하면 된다.

Controller

• 라이브러리와 같이 사용하고 싶을때 사용한다고 생각하면 된다.

import { Input } from "antd";
import { Controller } from "react-hook-form";

<Controller
  control={control}
  name={name} // hook-form에서 사용되는 name을 넣으면 된다.
  rules={{ maxLength:0 }} //register에서 사용한 방식과 동일하다.
  render={({ field }) => {
  //field ...register와 같다.
    return (
      <Input
        {...field}
        allowClear={allowClear}
        placeholder={placeholder}
        disabled={disabled}
      />
    );
  }}
/>

field

Controller에서 사용되며, field에서 onChange, value값을 따로 빼서 사용하는 경우도 있었다.

<Controller
  control={control}
  name={name}
  rules={{ required: required }}
  render={({ field: { onChange } }) => {
    return (
      <TimePicker
        format={format}
        onChange={(dayjsTime, stringTime) => {
          onChange(stringTime);
        }}
      />
    );
  }}
/>

TimePicker의 경우 onChnage를 했을경우 dayjs형식과 string형식의 value를 내보내준다. 이렇게 했을 경우에 dayjs의 형식이 hook-form의 형식과 맞지 않기 때문에, onChang를 따로 분리해서 string의 형식에 맞는 데이터로 onChnage시켜주었다.

watch

• watch("name") 사용하면, 해당하는 name의 값을 구독하는 것이라고 생각하면 된다. name의 값을 return해주며 해당값이 바뀔때마다 name과 관련된 컴포넌트들이 전부 리렌더링된다. 빈값을 사용할 경우 watch() 전체 hook-form의 값을 return해주며, 모든 hook-form과 관련된 컴포넌트들이 리렌더링 된다. useEffect의존성 배열에도 값을 넣어 사용할 수 있다.

getValues

• return해주는 값은 watch와 같지만, 실시간으로 해당 name의 값을 가져오는 것이 아니라 사용 했을 경우에만 값을 가져온다. useEffect의존성 배열에도 값을 넣어도 동작되지 않으며, 사용했을 경우에 관련된 모든 컴포넌트들을 리렌더링 시킨다.

setValue

• 말 그대로 value의 값을 바꿔준다. 사용법은 setValue("name",변경할 값) 변경 후 화면에 변경된 값을 보여주고싶다면, getValues or watch를 사용해주어야한다.

handleSubmit

• handleSubmit의 첫쨰 인자로는, 현재 입력된 hook-form의 value값을 객체로 반환해준다. 두번째 인자로는, 설정된 제한조건에 맞지 않는 애들을 객체형식으로 반환해준다.

const onSubmit = (data)=> {}
const onSubmitError = (error)=> {}

 <form  onSubmit={handleSubmit(onSubmit, onSubmitError)}>
 </form>

resetField

• 말그대로 해당하는 name이 가진 값을 초기화해준다.

resetField("name");

formState: { errors }

• 조건이 맞지 않는 애들을 객체형식으로 반환해준다.

{
"name": {
  "type": "required", // 
  "message": "입력해 주세요.", //메세지는 따로 설정법은,, 다음에!
  "ref": {}
    },
}

useFieldArray

• 하나가 아닌 여러개를 hook-form으로 관리할 수 있다.

const { fields, append, remove, update } = useFieldArray({
    name: "name",
    control,
  });

fields

• default의 값이 없다면 빈 배열로 반환해준다. 있다면 아래와 같이 id, 관리해야하는 name를 반환해준다

fields =
[
    {
        "nick": "",
        "phone": "",
        "id": "13aa6702-b185-4e70-8cd9-6d1e23eaa17f"
    },
    {
        "nick": "",
        "phone": "",
        "id": "7eefc474-4d09-4cdb-8f36-9fd23248630b"
    }
]

직접 사용할 때는 아래와같이 사용한다.

fields.map(({nick,phone},idx)=>
<Controller
  control={control}
  name={`"name".${idx}.nick`} // 인덱스 번호로
  rules={{ maxLength:0 }} 
  render={({ field }) => {
    return (
      <Input
        {...field}
        allowClear={allowClear}
        placeholder={placeholder}
        disabled={disabled}
      />
    );
  }}
/>)

append

• fields를 추가될때 사용한다. field의 값을 정해서 추가시킬 수 있다.

      <button
        onClick={() => {
          append({ nick: "", phone: "" });
        }}

        Fields추가
      </button>

remove

• fields의 값을 삭제한다

      <button
        onClick={(idx) => {
          remove(idx); //idx 번호로 삭제 한다 id의 값이 아님
        }}

        Fields추가
      </button>

잘만쓰면 정말 좋은 라이브러리인 것 같다.
여러가지 변수 상황이 많은 것 같고, 시간이 된다면 정리해보겠다!
틀린내용도 있을 수 있으니 있다면 알려주세요!