React Hook Form

useForm

const { register } = useForm({
  mode: 'onSubmit',
  reValidateMode: 'onChange',
  defaultValues: {},
  resolver: undefined,
  context: undefined,
  criteriaMode: "firstError",
  shouldFocusError: true,
  shouldUnregister: true,
})

mode

어느 시점부터 입력값 유효성 검사를 시작할지 설정한다. 기본값은 onSubmit으로 폼 입력값을 제출한 후부터 입력값 유효성 검사를 시작한다.

reValidateMode

언제마다 입력값 유효성을 검사할지 설정한다. 위의 mode 시점 이후에 수행된다.

defaultValues

input에 설정될 기본값을 설정한다.

컴포넌트가 마운트될 때만 설정된다.
기본값을 '', null 등으로 설정하는 것을 권장한다.
현재 입력값을 기본값으로 바꾸고 싶으면 reset API를 사용한다.
이 값은 watch 함수의 기본값(2밴째 인수)으로 설정된다.

resolver: undefined,
context: undefined,
criteriaMode: "firstError",
shouldFocusError: true,
shouldUnregister: true,

register

watch 함수 작동 안 함. 해당 입력창에 설정된 초기값만 불러온다.

Controller

useForm과의 차이

useForm은 ref를 이용한 uncontrolled 모드
Controller는 state를 이용한 controlled 모드

as와 render의 차이

<Controller
  control={control}
  name="price"
  render={props => (
    <InputComponentA
      name={props.name}
      onBlur={props.onBlur}
      onChange={props.onChange}
      value={props.value}
    />
  )}
/>

<Controller
  control={control}
  name="price"
  render={props => (
    <InputComponentA
      {...props}
    />
  )}
/>

<Controller
  as={<InputComponentA />}
  control={control}
  name="price"
/>

위 3가지 방법은 동일한 결과를 얻는다.

차이점은 render props는 전달받은 4개의 props(name, onBlur, onChange, value)를 자신이 원하는 곳에 직접 주입할 수 있다는 점이다. 만약에 InputComponentA가 기본적으로 위 4개의 props를 가지고 있지 않으면 render props를 통해 적절한 곳에 주입하면 된다.

props.onChange는 이벤트 객체나 값을 인수로 받아 그 데이터를 Controller 내부에 저장한다. props.onChange의 인수가 이벤트 객체면 event.target.value 등의 데이터가 저장되고, 값이면 첫번째 인수값이 저장된다.