[React] React-Hook-Form에 대해 알아보기

https://react-hook-form.com/

React Hook Form - performant, flexible and extensible form library

 

1. useForm

form 을 만들기 위해서는  useForm을 사용해야한다. 

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

- mode : 동작을 제출하기 전에 검증하는 방법 ⭐️

- reValidateMode : 동작을 제출한 후 검증하는 방법

- defaultValues : 초기값 설정 ⭐️

- resolver : 커스텀한 유효성 검사 로직 사용 가능

- context : 유효성 검사기(resolver)에 전달할 컨텍스트를 설정합니다. 일반적으로 유효성 검사기가 다른 데이터나 함수에 접근해야 할 때 사용됩니다.

- criteriaMode : 여러 개의 에러가 발생했을 때 어떤 에러를 우선하여 보여줄지를 설정

- shouldFocusError : 유효성 검사에 실패한 필드에 자동으로 포커스를 맞출지 여부를 설정합니다. true로 설정하면 실패한 필드에 포커스가 이동됩니다. ⭐️

- shouldUnregister : 등록된 폼 필드를 언제 해제할지를 설정합니다. false로 설정하면 폼이 리셋되어도 등록된 필드는 유지됩니다.

- shouldUseNativeValidation : 브라우저 기본 유효성 검사를 사용할지 여부를 설정합니다. false로 설정하면 React Hook Form의 내장 유효성 검사를 사용합니다.

- delayError : 에러 메시지를 보여주는 딜레이를 설정합니다. 일정 시간이 지난 후에 에러 메시지를 보여주고자 할 때 사용됩니다.

 

mode / reValidateMode 옵션들

1. onBlur 모드: 입력 필드가 포커스를 잃을 때 유효성 검사가 수행됩니다. 이는 유저에게 폼을 작성하는 도중에 계속적으로 오류 메시지가 나타나는 것을 방지하여 좋은 사용자 경험을 제공합니다. 특히 복잡하거나 긴 폼에서 유용
2. onChange 모드: 사용자가 입력을 하는 즉시 유효성 검사가 수행됩니다. 이는 즉각적인 피드백을 제공하여, 간단한 폼에 유용할 수 있습니다.
3. onSubmit 모드 : 사용자가 폼을 제출할 때만 유효성 검사가 수행됩니다. 사용자가 제출 버튼을 클릭하거나 폼을 제출할 때ㄲ까지 어떠한 간섭을 하지 않습니다.

 

useForm을 도와주는 함수에 대해 알아보자

const {
	register
	unregister
	formState
	watch
	handleSubmit
	reset
	resetField
	setError
	clearErrors
	setValue
	setFocus
	getValues
	getFieldState
	trigger
	control
  } = useForm();

1. register

각각의 폼 입력 필드와 연결되어, 그 필드의 값들을 추적하고 관리하는데 사용됩니다.

const { register } = useForm();

<input {...register("firstName")} />

register 함수에 전달하는 문자열 인자는 해당 입력 필드의 이름입니다. 이름을 통해 폼의 다른 부분에서 해당 입력 필드의 값을 참조하고 변경할 수 있습니다.

register 함수를 통해 입력 필드에 더 많은 설정을 추가할 수 있습니다. 예를 들어, 필수 입력 필드를 설정하거나 유효성 검사 규칙을 추가할 수 있습니다. 만약 필드 값이 이러한 규칙을 위반하면 react-hook-form은 해당 필드의 에러 상태를 관리하고, 이를 사용하여 에러 메시지를 표시할 수 있습니다.

<input {...register("firstName", { required: true })} />
<input {...register("age", { min: 18, max: 99 })} />
<input
      {...register('password', {
        required: '비밀번호는 필수 입력입니다.',
        pattern: {
          value: /^(?=.*?[A-Za-z])(?=.*?[0-9]).{6,}$/,
          message:
            '영문, 숫자를 포함한 6자 이상의 비밀번호를 입력해주세요.',
        },
      })}
      errors={errors}
/>

2. formState

현재 폼 상태에 대한 여러 정보를 포함하고 있습니다.

formState 객체에는 여러 속성이 있습니다

1. isDirty: 사용자가 어느 한 입력 필드를 수정했는지 여부를 나타냅니다.
2. isValid: 현재 폼 값이 모든 유효성 검사 규칙을 통과했는지 여부를 나타냅니다. ⭐️
3. errors: 현재 폼의 각 필드에서 반환된 유효성 검사 오류입니다.
4. isSubmitted: 폼이 이미 제출되었는지 여부를 나타냅니다.
5. isSubmitting: 폼이 현재 제출 중인지 여부를 나타냅니다.
6. isTouched: 사용자가 어느 한 입력 필드를 터치했는지 여부를 나타냅니다.

이러한 속성들은 폼의 현재 상태에 따라 UI를 업데이트하거나 특정 동작을 실행하는 데 유용합니다. 예를 들어, isValid 속성은 폼이 유효한 경우에만 제출 버튼을 활성화하는 데 사용할 수 있습니다.

const { formState: { isValid } } = useForm();

<button disabled={!isValid}>Submit</button>

또한 errors 속성을 사용하여 각 필드에 대한 오류 메시지를 표시할 수 있습니다.

const { register, formState: { errors } } = useForm();

<input {...register("firstName", { required: "필수 입력 값입니다." })} />
{errors.firstName && <p>{errors.firstName.message}</p>}⭐️

3. watch

입력 필드의 상태를 실시간으로 확인하는데 사용됩니다. watch는 모든 입력의 상태를 관찰하며, 필드의 변경 사항이 있을 때마다 새로운 값을 반환합니다.

❗️ watch는 입력 필드의 상태를 실시간으로 감시하므로, 복잡한 폼에서는 성능에 영향을 줄 수 있으니 주의해서 사용해야 합니다.

 

특정 필드 감시: watch 함수에 필드 이름을 인수로 전달하여 특정 필드를 감시할 수 있습니다.

const { register, watch } = useForm();
const firstName = watch("firstName");

모든 필드 감시: watch 함수에 인수를 전달하지 않으면 모든 필드를 감시합니다. 이 경우, watch는 입력 필드의 전체 상태 객체를 반환합니다.

const { register, watch } = useForm();
const allFields = watch();

여러 필드 감시: watch 함수에 필드 이름의 배열을 전달하여 여러 필드를 동시에 감시할 수 있습니다.

const { register, watch } = useForm();
const [firstName, lastName] = watch(["firstName", "lastName"]);

4. handleSubmit

폼의 제출 이벤트를 처리하는데 사용됩니다. 이 함수는 콜백 함수를 인수로 받으며, 폼이 유효한 경우에만 이 콜백 함수를 실행합니다.

콜백 함수는 폼 데이터를 인수로 받습니다. 폼 데이터는 입력 필드의 이름을 키로 가지고 있는 객체입니다. 

handleSubmit 함수는 자동으로 event.preventDefault()를 호출하여 페이지의 자동 리프레시를 막고, 입력된 데이터를 수집한 후 유효성을 검사합니다. 유효성 검사를 통과하면, handleSubmit는 콜백 함수를 실행합니다.

export default function App() {
  const { register, handleSubmit } = useForm();

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>⭐
      <input name="firstName" ref={register} />
      <input name="lastName" ref={register} />

      <button type="submit">Submit</button>
    </form>
  );
}

 

또한, handleSubmit는 선택적으로 두 개의 콜백 함수를 더 받을 수 있습니다. 두 번째 콜백 함수는 유효성 검사에서 오류가 발생했을 때 실행되고, 세 번째 콜백 함수는 폼이 제출될 때 항상 실행됩니다.

handleSubmit(onSubmit, onError, onFinally);

- onSubmit : 유효성 검사를 통과했을 때 실행되는 콜백

- onError : 유효성 검사에서 오류가 발생했을 때 실행되는 콜백

- onFinally : 폼 제출 후 항상 실행되는 콜백

5. reset

폼의 입력 필드를 초기 상태로 되돌리는데 사용됩니다. 즉, 입력 값, 오류, 더티 필드, 터치된 필드 등의 상태가 모두 초기화 됩니다.  

그러나, useForm의 defaultValues를 변경하지 않습니다.

function MyForm() {
  const { register, handleSubmit, reset } = useForm();

  const onSubmit = data => {
    console.log(data);

    // submit 후 form reset
    reset(); ⭐
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} defaultValue="test" />
      <input {...register("lastName")} />
      <button type="submit">Submit</button>
    </form>
  );
}

6. setError

특정 입력 필드에 프로그래밍 방식으로 오류를 설정할 수 있습니다. 이는 서버에서 오류 메시지를 받아 폼에 적용하거나, 사용자 정의 유효성 검사기를 사용하여 오류를 설정할 때 유용합니다.

function MyForm() {
  const { register, handleSubmit, setError } = useForm();

  const onSubmit = data => {
    if (/* some condition */) {
      setError("firstName", {
        type: "manual",
        message: "First name is required"
      });
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} />
      <button type="submit">Submit</button>
    </form>
  );
}

첫 번째 인자는 오류를 설정할 필드의 이름입니다.

두 번째 인자는 오류 객체로, 이는 type과 message 속성을 포함할 수 있습니다.

- type : 오류의 유형을 나타내는 문자열

- message : 사용자에게 보여줄 오류 메시지

 

----

https://leeseohyun430.tistory.com/118