React Hook Form 이해

설명

form 을 다룰 때 사용하는 라이브러리로 최적화, 유효성 검증, api 등 유용한 기능 등을 제공합니다.

controlled/uncontrolled components 란

• uncontrolled components: 값이 DOM에서 관리되는 컴포넌트로, React 상태와 별개로 DOM 자체가 입력값을 보관하여 리렌더링이 최소화되는 방식의 컴포넌트

• controlled components: 값이 React 상태로 관리되는 컴포넌트로, value와 onChange 이벤트를 통해 실시간으로 상태가 제어되는 방식의 컴포넌트

주요 기본 기능

1. 최적화

React Hook Form 는 주로 uncontrolled components 를 사용하여 불필요한 리렌더링을 방지하고 직관적인 api 를 제공하여 효과적으로 로직을 구현합니다. 다만 controlled components 을 사용하는 경우에도 렌더링을 최적화합니다.

2. 필드 등록

register 함수를 사용하여 입력 필드를 React Hook Form에 연결하면, 해당 필드의 값과 상태(예: 유효성 검사, 에러 메시지) 를 React Hook Form이 추적 가능합니다.

3. 유효성 검증

register option 에 유효성 검증을 위한 속성을 제공하여 기본적인 검증 option(required, min, max, minLength, maxLength), 정규표현식(pattern), 유효성 검증을 위한 콜백 함수(validate) 등을 구성할 수 있습니다.

4. schema validation 라이브러리와 통합

Yup, Zod, Superstruct 및 Joi 등 schema 기반 form 검증을 지원하여 schema 를 useForm option 인 resolver에 등록하여 schema 에 대해 입력 데이터를 검증하고 오류 또는 유효한 결과를 반환합니다.

5. UI libary 와 통합 / Controlled Components 활용

React Hook Form은 외부 UI 라이브러리 component 와 쉽게 통합이 가능하며 만약 구성 요소가 입력의 ref 를 노출하지 않는 controlled components 의 경우 등록 프로세스를 처리하는 Controller component 를 사용해야 합니다.

import Input from  "@material-ui/core/Input";

<Controller
  name="firstName"
  control={control}
  render={({ field }) => <Input {...field} />}
/> pattern

FormProvider / useFormContext

React Hook Form의 FormProvider 는 React의 context API 를 기반으로 구축되어 모든 레벨에서 수동으로 props 을 전달할 필요 없이 useFormContext 를 통해 form 에 접근 할 수 있습니다.

에러 핸들링

React Hook Form은 error object 를 제공하여 각 필드의 error 정보를 가지며 error type 은 주어진 검증 제약 조건을 반환합니다.

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

return (
<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register("firstName", { required: true })} />
  {errors.firstName && "First name is required"}
<form>
)

참고

https://deswaq.tistory.com/61
https://www.react-hook-form.com/