목적
저번 블로그에서 React Hook Form을 소개하려다가 어쩌다 보니 Zod를 먼저 소개하게 됐었는데, 그래서 오늘은 그때 소개하지 못한 React Hook Form에 대해 본격적으로 다뤄보려고 한다. React Hook Form이 어떤 라이브러리인지, 그리고 얼마나 효율적으로 폼을 관리할 수 있는지를 소개해보겠다.
React Hook Form
React Hook Form은 React에서 폼 상태를 간편하고 높은 성능으로 관리할 수 있게 해주며, 사용하기 쉬운 유효성 검사 기능을 제공하는 라이브러리이다.
특징
React Hook Form의 주요 특징은 다음과 같다.
-
쉬운 유효성 검사:
useForm,register,handleSubmit등의 함수를 사용해 직관적이고 쉽게 폼을 관리할 수 있다. -
높은 성능: 비제어(uncontrolled) 컴포넌트 기반으로 리렌더링을 최소화하여, 대규모 폼에서도 빠르게 작동한다.
-
연동성: Zod와 같은 스키마 기반 유효성 검사 라이브러리와도 잘 통합된다. 특히 TypeScript를 사용할 경우, 타입 추론과 함께 타입 안정성도 챙길 수 있어서 더 유용하다.
사용법
설치
NPM
npm install react-hook-formYarn
yarn add react-hook-formPNPM
pnpm add react-hook-form예제 코드 & 코드 분석
공식 문서에 있는 코드를 분석하며 설명해보겠다.
import { useForm, SubmitHandler } from "react-hook-form";
type Inputs = {
example: string;
exampleRequired: string;
};
const LoginPage = () => {
const {
register,
handleSubmit,
watch,
formState: { errors },
} = useForm<Inputs>();
const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);
console.log(watch("example"));
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input defaultValue="test" {...register("example")} />
<input {...register("exampleRequired", { required: true })} />
{errors.exampleRequired && <span>This field is required</span>}
<input type="submit" />
</form>
);
};
export default LoginPage;1. 임포트 부분
import { SubmitHandler, useForm } from "react-hook-form";-
useForm: React Hook Form의 핵심 훅으로, 폼 관리에 필요한 다양한 기능을 제공한다. -
SubmitHandler: 폼 제출 함수의 타입을 정의한다.
2. 인터페이스 정의
interface Inputs {
example: string;
exampleRequired: string;
}- 폼에서 관리할
example과exampleRequired두 가지 문자열 필드의 타입을 정의한다.
3. useForm 훅 사용
const {
register,
handleSubmit,
watch,
formState: { errors },
} = useForm<Inputs>();-
useForm<Inputs>(): 앞에서 정의한 인터페이스를 타입으로 전달하여 폼 훅을 초기화한다. -
register: 입력 필드를 React Hook Form에 등록하는 함수이다. -
handleSubmit: 폼 제출 이벤트를 처리하는 함수이다. -
watch: 특정 입력 필드의 값을 실시간으로 감시하는 함수이다. -
formState: { errors }: 폼의 오류 상태를 담고 있다. (제출 여부 등의 상태도 관리 가능)
4. 제출 핸들러
const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);- 폼이 성공적으로 제출되었을 때 폼 데이터를 콘솔에 출력하는 함수이다.
5. 실시간 값 확인
console.log(watch("example"));watch함수를 사용해example필드 값을 실시간으로 모니터링하며, 값이 변경될 때마다 콘솔에 출력한다.
6. 렌더링 부분
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input defaultValue="test" {...register("example")} />
<input {...register("exampleRequired", { required: true })} />
{errors.exampleRequired && <span>이 필드는 필수입니다</span>}
<input type="submit" />
</form>
);-
handleSubmit(onSubmit): 폼 제출 시 유효성 검사를 수행한 후onSubmit함수를 호출한다. -
{...register("example")}: 입력 필드를 React Hook Form에 등록하고, 필요한 props를 자동으로 추가한다. -
defaultValue="test": 초기값을 설정한다. -
{...register("exampleRequired", { required: true })}: 입력 필드를 React Hook Form에 등록하고, 필수 입력 필드로 설정한다. -
{errors.exampleRequired && <span>이 필드는 필수입니다</span>}: 필수 입력 필드에 값이 없으면 오류 메시지를 표시한다.
마무리
오늘은 이렇게 저번에 소개하지 못했던 React Hook Form에 대해 소개해봤다. 사용법도 간단하고 성능도 뛰어난데, 번들 사이즈도 작아서 때문에 작은 프로젝트에서도 충분히 유용하게 사용할 수 있을 것 같다.
더 자세한 설명과 다른 옵션들은 공식문서에 잘 정리돼 있으니 한 번쯤 읽어보는 걸 추천한다. 추가로 Zod와 함께 간단한 로그인 폼도 만들어봤는데, React Hook Form과 Zod를 어떻게 함께 사용하는지 궁금하다면, 부족하지만 내가 작성한 코드를 참고해보면 좋을 것 같다.
