React hook form - reset, setValue

---

reset 사용하기

  const {
    control,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(schema),
  });

1. useForm()을 통해서 불러온 const 함수 중에서 reset을 사용해보자.
2. reset({ ...e.row.data, remark: e.row.data.remark || undefined });
3. 이렇게 사용된 reset은 form 안의 필드값과 에러값을 초기화 한다.
4. 자신이 넣고 싶은 데이터를 통해서 초기화가 가능하다.

setValue 사용하기

  const {
    control,
    handleSubmit,
    watch,
    setValue,
    reset,
    trigger,
    formState: { errors },
  } = useForm({
    defaultValues: null,
    resolver: yupResolver(schema),
  });

1. setValue는 동적으로 <input /> 또는 <select /> 값을 설정할 수 있다.

 <LossCostModal
          onClose={closeModal}
          closable={true}
          visible={true}
          maskClosable={false}
          dataGrid={dataGridRef}
          setValue={setValue}
          
        />

2. 이렇게 LossCostModal의 매개변수에 setValue를 넣어준다.
3. 필드값에 setValue라는 함수를 넣어주도록 한다.

  const onSelect = () => {
    setValue("code", selectRowData.code);
    onClose();
  };

4. 해당 함수는 <button />의 onClick 이벤트 함수에 들어가게 된다.
5. 여기에서 매개변수로 가져온 setValue("key", value);를 통해 input 값을 바꾸도록 한다.

---

결론

setValue는 한 페이지가 아닌 페이지가 나뉘어져있을 때(Modal을 사용하는 경우) 파라미터를 통해서 바인딩을 하는 것에 좋다.

반대로 reset은 한 페이지에서 바로 변수 바인딩이 가능할 때 사용하는 게 좋다.