Form 라이브러리 - React Hook Form (3. 다양한 활용)

useForm()의 옵션

useForm()에 적용 가능한 다양한 옵션들을 통해 폼의 동작을 커스터마이즈할 수 있다.

const { register, handleSubmit, formState } = useForm({
  defaultValues: {},     			// 폼 입력 요소의 초기값을 설정
  mode: 'onChange',   				// 유효성 검사 트리거 모드 설정 ('onSubmit', 'onBlur', 'onChange')
  reValidateMode: 'onChange', 		// 재검사 모드 설정 ('onBlur', 'onChange')
  resolver: undefined, 				// 커스텀 유효성 검사를 위한 함수 설정
  context: undefined, 				// context를 공유할 수 있는 속성 (for Resolver)
  shouldFocusError: true, 			// 에러 발생 시 해당 필드로 자동 포커스 설정 여부
  shouldUnregister: true, 			// 컴포넌트 언마운트 시 등록 해제 여부
  criteriaMode: "firstError", 		// 첫 번째 에러만 표시할지 모든 에러를 표시할지 설정
});

watch

watch는 폼 입력 요소의 값 변화를 감지하고 해당 값을 실시간으로 가져올 수 있는 기능을 제공한다. 이를 통해 특정 입력 필드의 값이나 여러 필드의 값을 모니터링하고, 필요한 동작을 수행할 수 있다.

const { register, handleSubmit, formState: { errors }, watch } = useForm<FormProps>();

const watchName = watch('name');
const watchAge = watch('age');

....

<>
  <input type='text' {...register('name', { required: true, min: 20, max: 30 })} />
  <input type='submit' />
  <br />
  {
    watchName
  }
</>

Provider / Context

react-hook-form을 작성할 때, 반드시 하나의 컴포넌트에서 작성하라는 법은 없다. props를 전달하여 자식 컴포넌트를 통해 form을 꾸릴 수 있다. 이때, react에서 제공하는 ContextProvider와 비슷하게 부모 컴포넌트를 <FormProvider /> 로 감싸준다.

// 자식 입력 컴포넌트
import { useFormContext } from 'react-hook-form';

const ChildrenInput: FC = () => {
  const { register } = useFormContext();

  return <Input {...register('name', { required: true, minLength: 2, maxLength: 4 })} />
}

// 부모 컴포넌트
import { FormProvider, useForm } from 'react-hook-form';

const method = useForm<Form>();

....

<FormProvider {...method}>
  <form onSubmit={method.handleSubmit(onSubmit)}>
    <ChildrenInput />
    <br />
    <ChildrenInput />
    <input type='submit'/>
    <br />
    {
      method.formState.errors.name?.type === 'required' && (
        <span>Name is required!</span>
      )
    }
    {
      method.formState.errors.name?.type === 'minLength' && (
        <span>Min length is '2'</span>
      )
    }
    {
      method.formState.errors.name?.type === 'maxLength' && (
        <span>Max length is '4'</span>
      )
    }
    <p>{result}</p>
  </form>
</FormProvider>