1. React Hook Form
form의 상태와 유효성 검사를 처리하기 위한 라이브러리
장점 : 가볍고, 코드 로직이 간단해지고, 불필요한 리렌더링을 방지한다.
원래는 form을 작성하게 되면 input태그에 required, pattern, minlength, maxlength와 같은 제약조건을 많이 걸곤한다. 하지만 이 과정만으로는 충분하지 않다.
예를들어 유저가 개발자도구(F12)를 열어서 태그의 속성을 수정해버리면 위에서 작성한 제약조건들을 없애버릴 수 있다. 그렇기 때문에 내부적인 로직을 추가해서 한번더 조건을 제한시켜야 한다.
onSubmit을 통해 받아온 정보들을 전부 자바스크립트(타입스크립트)로직으로 제한조건을 설정해주어야 하고, 그렇게 되면 코드의 길이와 가독성이 상당히 떨어질 수 밖에 없다. 이때 필요한 라이브러리가 React Hook Form이다.
2. 사용 방법
import React from 'react';
import { useForm } from 'react-hook-form';
export default function App() {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = data => console.log(data);
console.log(errors);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input type="text" placeholder="First name" {...register("First name", {required: true, maxLength: 80})} />
<input type="text" placeholder="Last name" {...register("Last name", {required: "This is required", maxLength: { value:100, message: "This input exceed maxLength.",},})} />
<input type="text" placeholder="Email" {...register("Email", {required: true, pattern: /^\S+@\S+$/i})} />
<input type="tel" placeholder="Mobile number" {...register("Mobile number", {required: true, minLength: 6, maxLength: 12})} />
<select {...register("Title", { required: true })}>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
<input {...register("Developer", { required: true })} type="radio" value="Yes" />
<input {...register("Developer", { required: true })} type="radio" value="No" />
<input type="submit" />
</form>
);
}공식 문서에 좋은 예시가 있어서 가져왔다.
하나씩 살펴보자
- 우선 각 input에 {…register(”원하는 이름”, {제약 조건})}이런식으로 작성하면 된다. 제약조건들은 공식 문서에 자세하게 나와있다.
- <form onSubmit={handleSubmit(onSubmit)}>이런식으로 작성하게 되면 onSubmit함수의 인자로 data를 사용할 수 있다. 이 data인자에는 다음과 같은 값들이 들어있다.
data: {
"First name": "",
"Last name": "",
"Email": "",
"Mobile number": "",
"Title": "",
"Developer": ""
}이렇게 받은 값들을 이용해서 api post요청을 통해 form을 처리하면 된다.
- error message
<input type="text" placeholder="Last name" {...register("lastName", {required: "This is required", maxLength: { value:100, message: "This input exceed maxLength.",},})} />이런식으로 작성하면 되고, 사용시 errors.lastName?.message라고 사용하면 된다.