TIL #88 | React Hook Form 사용법 정리

React Hook Form은 유효성 검증 기능을 갖춘 폼을 사용하기 편리하도록 만든 라이브러리이다.
React Hook Form은 불필요한 재렌더링을 제거하면서 작성해야 하는 코드의 양을 줄여준다는 것이 큰 장점이다.
오늘은 React Hook Form을 사용해서 만들어 본 폼을 복습하고 공식문서를 참고하면서 사용 방법을 정리해보려고 한다.

설치

npm install react-hook-form

useForm

useForm은 form을 쉽고 효율적이게 관리하기 위한 커스텀 훅

useForm은 여러 옵션을 사용할 수 있는데 기본적으로 많이 사용하는 옵션은 register, defaultValues, handleSubmit, reset, fornState, node가 있다.

아래 예시와 같이 사용할 수 있다.

// type 지정
type FormValues = {
  email: string;
  password: string;
  address1?: string;
  address2?: string;
  nickname?: string;
};

const {
  register,
  handleSubmit,
  formState: { errors },
  reset,
} = useForm<FormValues>({ mode: "onChange" });

register

등록된 입력값의 유효성 검사를 한다.

나의 경우엔 유효성 검사 규칙 컴포넌트를 분리해서 사용했다.

1. 규칙 설정

export const userEmail = {
  required: "필수 입력란입니다.",
  minLength: {
    value: 4,
    message: "최소 8자를 입력해주세요.",
  },
  maxLength: {
    value: 30,
    message: "최대 30자까지 입력하실 수 있습니다..",
  },
  pattern: {
    value:
      /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/,

    message: "@를 포함한 이메일 양식으로 입력해주세요",
  },
};

2. 유효성 검사 적용하기

<input
  type="email"
  placeholder="이메일"
  {...register("email", userEmail)}
/>

handleSubmit

제출한 값에 대한 유효성 검사가 성공하면 데이터를 검증할 수 있도록 한다.

const onSubmit: SubmitHandler<FieldValues> = ({ email, password }) => {
  if (mode === "로그인") {
    signInHandler({ email, password });
  } else {
    signUpHandler({ email, password });
  }

  reset();
};

setError 함수를 통해 onSubmit 내에서의 에러를 처리할 수 있다.

formState

form에 대한 유효성, 에러, 변경 여부, 등록 수 등의 값이 포함되어 있어 값에 따른 로직을 구성할 수 있도록 한다.

유효성 검증에 통과되지 않았다면 formState에 저장된 errors 값을 통해 에러 처리를 해줄 수 있다.

{errors?.email && ( // 에러 메시지
  <StError>{errors?.email?.message as string}</StError>
 )}

reset

reset(); // 기본값으로 업데이트

reset({ test: 'test' }); // defaultValues && 양식 값을 업데이트

reset(undefined, { keepDirtyValues: true }); // 다른 양식 상태를 재설정하지만 defaultValue 및 양식 값은 유지

제출 후 리셋하기

const onSubmit = (data) => {
  	// 제출 시 발생할 함수
	reset(); // 기본값으로 업데이트
}

React.useEffect(() => {
  // 제출 성공 시 
  if (formState.isSubmitSuccessful) {
    reset({ something: "" })
  }
}, [formState, submittedData, reset])

watch

조건에 따라 필드를 다르게 노출해야 하는 상황을 구현할 때 사용한다.

const watchShowAge = watch("showAge", false) // you can supply default value as second argument
const watchAllFields = watch() // when pass nothing as argument, you are watching everything
const watchFields = watch(["showAge", "age"]) // you can also target specific fields by their names

{watchShowAge && (
  <input type="number" {...register("age", { min: 50 })} />
)}

---

마무리

React Hook Form을 사용하면 유효성 검사를 일일이 구현할 필요 없이 간단하게 구현할 수 있었다. 간단한만큼 코드 해석이 쉽고 유지보수가 쉬워지기 때문에 대부분 폼을 구현할 때 기본적으로 React Hook Form을 쓰는 이유를 알 것 같다. 어쩌면 필수적으로 알아둬야 하는 라이브러리이다.
이번에 정리해본 것보다 훨씬 많은 옵션이 존재하기 때문에 사용하면서 좀 더 많은 옵션을 알아보고 적용하여 빠르고 편리하게 폼을 구현해 볼 수 있을 것 같다.