react-hook-form 사용법(2)

지난 포스트에서는 react-hook-form 기본 설정을 알아보았다.

이번 포스트에서는 react-hook-form에서 자주 사용되는 기능들에 대해 해당하느 부분의 코드를 살펴보며 알아본다.

 

1. 필수값

<input
	type="text"
	value={value}
	{...register("inputName", {
	required: true
    // required 에 따로 에러 메세지를 원하는 경우
	// required: {
	//   value: true,
	//   message: "필수 입력사항입니다.",
	// },
})}

기본적으로 input에 register를 적어주며, "inputName"에 해당하는 부분이 input 태그의 name에 해당한다.

단순히 required: true 만을 적고 에러 메세지를 설정해도 되지만, 여러 유효성 검사 조건이 추가될 경우, 그에 해당하는 에러 메세지를 미리 설정해주는 것이 편리하다.

 

2. 패턴(정규식) 검사

<input
	type="text"
	value={value}
	{...register("inputName", {
		required: { value: true, message: "필수 입력사항입니다." },
		pattern: {
			value: /^[a-zA-Z]*$/,
			message: "형식에 맞게 입력하세요.",
		},
})}

위와 같이 패턴, 즉 input 내용의 정규식 검사가 필요할 경우, pattern을 활용하면 된다.

value에는 검증하고자 하는 정규식(위 코드에서는 영어만 사용가능한 정규식)을,

message에는 마찬가지로 에러 메세지를 입력한다.

 

3. Custom 검사

const {
	...
    watch,
    ...
  } = useForm();

...

<input
	type="password"
	value={password}
	{...register("password", {
		required: { value: true, message: "필수 입력사항입니다." },
})}

<input
	type="password"
	value={passwordCheck}
	{...register("passwordCheck", {
		required: { value: true, message: "필수 입력사항입니다." },
		validate: (value: string) => value === watch("password"),
})}

본인이 원하는 조건으로 유효성 검증을 진행하는 방법이다.

validate를 활용하면 되는데 이 때, value는 현재 입력하는 input의 e.target.value이고 => return 값에 조건을 적어주면 된다.

위의 코드는 정말 단순한 비밀번호 input과 비밀번호 재입력 input 이다.

react-hook-form의 watch 메소드를 사용하여 name이 password 인 input의 value를 가져오고, passwordCheck의 value와 비교하는 방식이다.

 

4. 에러메세지 출력

{errors.inputName?.type === "required" && (
	<p>
		{errors.inputName.message}
	</p>
)}

에러 메세지를 표출하고자 하는 부분에 위 코드를 작성하면 된다.

위 코드를 살펴보면

1. erros 뒤에 string(inputName)을 통해 어떤 input 태그의 에러를 조회할지 설정한다.
2. 그에 해당하는 type(ex. required, pattern, validate ...) 을 조회한다.
3. 해당하는 name과 타입에 지정해준 메세지를 출력한다.

위와 같이 메세지를 출력하면 여러 type(유효성 조건)들을 지정해줘도 메세지는 하나만 입력해도 각각 매칭되어 출력되기 때문에 편리하다고 위에서 언급한 것이다.

 

5. 그 외 Tip

const {
    register,
    handleSubmit,
    watch,
    setError,
    clearErrors,
    setValue,
    formState: { errors },
} = useForm({ criteriaMode: "all", mode: "onChange" });

위 메소드들이 직접 react-hook-form을 사용할 때 사용한 것들이다.

• setError : 원하는 input 태그에 에러 type을 지정하여 에러를 발생시킨다.
• clearErrors : 원하는 input 태그에 발생한 에러들을 제거한다.
• setValue : 원하는 input 태그에 value를 지정한다.
• criteriaMode: "all" : 하나의 input 태그가 여러 에러 message를 가지고 표현하려면 필요한 조건이다.
• mode: "onChange" : input에 값이 변할 때마다 유효성 검증을 실시한다.

---

직접 사용해보고 자주 사용되는 react-hook-form의 기능들에 대해 살펴보았다.

input의 개수가 많고 관리할 유효성 조건들이 많아질수록 state의 관리가 늘어나는 react.js, next.js에서는

react-hook-form을 사용하면 코드 작성이 정말 편리해진다.

공식 문서를 참고하면서 본인 입맛에 맞는 유효성 검증을 해보면 좋을 것 같다.