[React Hook Form] React Hook Form 공부 - 12 (getValues, setValue 함수로 자바스크립트에서 FormValues 직접 제어하기) [7/25 study]

React Hook Form 공부 - 12

 

getValues, setValue 함수로 자바스크립트에서 FormValues 직접 제어하기

React-Hook-Form의 useForm 함수는 getValues(), setValue() 함수도 제공합니다.

 

기본 형태

Name			|			Output
getValues()		|	{ root: { test1: '', test2: ''} }

setValue('name', 'value', { options })

 

setValue 옵션

1. shouldValidate (boolean) => 유효성 검사를 수행할지 여부를 설정

2. shouldDirty (boolean) => 필드를 'dirty' 상태로 설정할지 여부를 결정

- ❓dirty 란?

주로 사용자가 어떤 형태로든 입력 필드에 대한 변경을 수행했을 때 사용되는 용어로, 이는 사용자의 상호작용이 발생했음을 나타내는 방법 중 하나입니다. 따라서, 폼의 특정 필드가 "dirty"라는 것은 해당 필드에 대한 사용자의 입력이 한 번 이상 발생했음을 의미합니다.

3. shouldTouch (boolean) => 터치하도록 설정할지 여부를 결정

const {
  register,
  control,
  handleSubmit,
  watch,
  getValues,
  setValue,
  formState: { errors },
} = useForm <FormValues >
{
  defaultValues: {
    username: 'IU',
    age: 0,
    dob: new Date(),
  },
}

const handleGetValues = () => {
  console.log("Values", getValues());
}

const handleSetValue = () => {
    setValue("username", "", {
      shouldValidate: true,
      shouldDirty: true,
      shouldTouch: true,
    });
}

...
...

return (
...
...
<button>Submit</button>
<button type="button" onClick={handleGetValues}>getValues</button>
<button type="button" onClick={handleSetValue}>setValue</button>
...
...
)

 

위 코드처럼 button을 만들었고 각각 getValues(), setValue() 함수가 작동하게 했고, 그 결과를

 

위 그림은 getValues 버튼을 누른 결과입니다.

 

위 그림은 setValue 버튼을 누른 결과인데요. 

setValue 함수에는 세 번째 인자로 객체를 넣을 수 있고, shouldDirty, shouldTouch, shouldValidate 항목을 지정할 수 있습니다. 

그래서 위 그림과 같이 오른쪽 DevTool에서 보면 Touch, Dirty등이 바뀐 게 보일 거고, shouldValidate 항목이 true 값이라서 Validation 작업도 이루어졌습니다.