React Hook Form으로 React 폼 처리 간소화하기
React Hook Form은 React 애플리케이션에서 폼을 다루는 방식을 크게 개선합니다. 폼 상태 관리를 단순화하고, 성능을 높이며, 선언적 검증과 유연한 연동을 제공하고, 반복 코드를 줄입니다. 재사용 가능한 폼 컴포넌트를 만들고 개발 과정을 정리해 더 나은 사용자 경험을 제공할 수 있습니다.
사용할 만한 이유를 아래에서 설명하겠습니다.
1. 단순한 상태 관리
React Hook Form이 폼 상태를 대신 관리합니다. 필드 값을 자동으로 추적하고 상태를 업데이트하므로 수동 상태 관리가 필요하지 않습니다. 코드 복잡성과 버그 위험이 줄고, DevTools를 사용하면 개발 경험도 더 매끄러워집니다.
import { useForm } from 'react-hook-form';
function MyForm() {
const { register, handleSubmit } = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input type="text" {...register("name")} />
<input type="email" {...register("email")} />
<button type="submit">Submit</button>
</form>
);
}
이 예제에서 register 함수는 필드를 폼에 등록하고 값을 자동으로 추적합니다. handleSubmit은 폼 제출을 처리하고 데이터를 onSubmit 콜백에 전달합니다.
2. 효율적인 다시 렌더링
React Hook Form은 변경된 필드만 다시 렌더링합니다. 전체 폼의 불필요한 렌더링을 피하므로 성능이 좋아지고 애플리케이션이 더 빠르게 반응합니다.
import { useForm } from 'react-hook-form';
function MyForm() {
const { register, handleSubmit } = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input type="text" {...register("name")} />
<input type="email" {...register("email")} />
<ExpensiveComponent />
<button type="submit">Submit</button>
</form>
);
}
필드가 바뀌어도 해당 필드만 다시 렌더링됩니다. 비용이 큰 렌더링 로직을 가질 수 있는 ExpensiveComponent는 불필요하게 다시 렌더링되지 않습니다.
3. 선언적 검증
각 필드의 검증 요구 사항을 간단하고 직관적인 문법으로 정의할 수 있습니다. 규칙을 적용하고 사용자에게 의미 있는 오류 메시지를 제공하기가 쉬워집니다.
import { useForm } from 'react-hook-form';
function MyForm() {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input
type="text"
{...register("name",{ required: 'Name is required' })}
/>
{errors.name && <span>{errors.name.message}</span>}
{/* as you can see it is very handy with handling errors as well*/}
<input
type="email"
{...register("email",{
required: 'Email is required',
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
message: 'Invalid email address',
},
})}
/>
{errors.email && <span>{errors.email.message}</span>}
<button type="submit">Submit</button>
</form>
);
}
4. 유연한 연동
기존 React 컴포넌트와 자연스럽게 연동됩니다. 폼 로직과 검증 규칙을 캡슐화한 재사용 컴포넌트를 만들고 애플리케이션 전반에서 조합해 사용할 수 있어 코드 재사용성과 유지보수성이 좋아집니다.
import { useForm, FormProvider } from 'react-hook-form';
import InputField from './InputField';
function MyForm() {
const methods = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<FormProvider {...methods}>
<form onSubmit={methods.handleSubmit(onSubmit)}>
<InputField name="name" label="Name" />
<InputField name="email" label="Email" type="email" />
<button type="submit">Submit</button>
</form>
</FormProvider>
);
}
function InputField({ name, label, type = 'text' }) {
const { register } = useForm();
return (
<div>
<label>{label}</label>
<input type={type} {...register(name)} />
</div>
);
}
5. 반복 코드 감소
폼 처리에 필요한 반복 코드를 크게 줄일 수 있습니다. 간결한 API가 복잡한 폼 처리를 추상화하므로 코드가 더 읽기 쉽고 유지보수하기 좋아집니다.
import { useForm } from 'react-hook-form';
function MyForm() {
const { register, handleSubmit } = useForm();
const onSubmit = (data) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input type="text" {...register("name")} />
<input type="email" {...register("email")} />
<button type="submit">Submit</button>
</form>
);
}
몇 줄의 코드만으로 상태 관리, 제출 처리, 필드 등록을 설정할 수 있습니다. 간결하고 표현력 있는 코드는 가독성과 유지보수성을 높입니다.
폼이 많은 프로젝트에서 React Hook Form은 개인적으로 큰 변화를 가져왔습니다. 필요한 작업을 빠르게 끝낼 수 있는 좋은 개발자 경험을 제공합니다.
React는 재사용 컴포넌트에 특히 유용하므로, 다음 글에서는 React Hook Form과 함께 컴포넌트 재사용성을 활용한 방법을 실용적인 예제로 설명하겠습니다.
관련 프로젝트 사례
현재 이 글은 독립적으로 제공되지만, 아래의 프로젝트 문의는 언제든 열려 있습니다.
프로젝트 시작하기
제품에 이런 수준의 사고와 실행이 필요하신가요?
제품을 구체화하고 인터페이스, 시스템, 개선 주기까지 실제로 출시할 파트너가 필요하다면 연락해 주세요.
프로젝트 시작하기