[React Hook Form] React Hook Form 톺아보기
라이브러리 없이 Form을 만들고 돌아보니 코드 양이 어마어마하다...
React Hook Form을 사용해서 조금 더 쉽게 Form을 만들어보고 싶어서 도전!
아직 공부하며 사용 중이라 완벽하게 마스터하지는 못했지만 아는 것만 정리해보려 한다.
설치
npm install react-hook-form
사용법
const { register, handleSubmit, watch, formState: { errors } } = useForm();
register
<input {...register("firstName", { required: true })} />유효성 검사에 사용할 요소를 register를 이용해서 연결한다.
register에 사용할 수 있는 유효성 검사 목록은 아래와 같다.
- required (필수 값)
- min (최소 값)
- max (최대 값)
- minLength (값의 최소 길이)
- maxLength (값의 최대 길이)
- pattern (값을 정규식 패턴으로 검사)
- validate (콜백 함수를 전달하거나 객체를 사용해 여러 콜백 함수를 전달하여 여러 유효성 검사를 할 수 있다)
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
console.log(errors);
const onSubmit = () => {};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("id", { required: true })} />
<button>submit</button>
</form>
);
유효성 검사에 required만 넣어서 사용해보자
input에 아무 값도 입력하지 않고 submit 버튼을 클릭하면 formState의 errors 객체에 error 정보가 입력된다.
여기서... register의 첫 번째 인자가 errors 상태의 키값이 된다.
true대신 에러때 사용할 에러 메시지를 입력할 수 있다.
<input {...register("id", { required: "필수 값입니다." })} />
빈 문자열 상태에서 submit 버튼을 누르게 되면 required의 값이 에러 메시지에 적용되는 것을 볼 수 있다.
다른 유효성 검사는 에러메세지를 등록하는 방법이 조금 다르다.
<input
{...register("id", {
maxLength: { value: 2, message: "최대 2글자 입니다" },
})}
/>;
이렇게 사용할 유효성 검사 키값과 그 안에 객체에 검사에 사용할 제한값? (value)와 에러 메시지로 사용할 message의 값을 사용해준다.
지금은 maxLength의 value값을 2로 해두었으니 3글자 이상을 입력하고 submit버튼을 클릭하면 에러 메시지를 확인할 수 있다.
꿀팁 아닌 꿀팁 (styled-component 같이 사용하기)
사실 여기서 많이 헤맸다...
forwardRef를 사용해서 사용할 요소에 register를 연결해주면 된다.
import React, { forwardRef } from "react";
const Input = forwardRef(({ name, ...restProps }, ref) => {
return <input name={name} ref={ref} {...restProps} />;
});
Input.displayName = "Input";
export default Input;
handleSubmit
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
console.log(errors);
const onSubmit = (data) => {
console.log("submit", data);
};
const onError = (error) => {
console.log("error", error);
};
return (
<form onSubmit={handleSubmit(onSubmit, onError)}>
<input {...register("id", { required: true })} />
<button>submit</button>
</form>
);
form태그의 onSubmit에 handleSubmit을 사용한다.
첫 번째 인수로 들어가는 onSubmit은 submit 동작 시 에러가 없을 때 동작하며
두 번째 인수로 들어가는 onError는 submit 동작 시 에러가 있을 때 동작한다.
위의 코드에서 현재 required값을 검사하고 있으니 문자열을 입력하고 submit 버튼을 클릭하면 onSubmit이 동작할 것이다.
onSubmit의 인수로 들어가는 데이터는 submit에 사용되는 데이터들이다.
register에 사용한 문자열 id를 키값으로 가지게 된다.
이번에는 빈 문자열로 테스트 submit 버튼을 클릭하게 되면 onError가 동작할 것이다.
watch
watch는 단어 그대로 내가 입력 값을 확인 할 수 있다.
const {
register,
handleSubmit,
formState: { errors },
watch,
} = useForm();
console.log(watch("id"));
return (
<form onSubmit={handleSubmit(onSubmit, onError)}>
<input {...register("id", { required: true })} />
<button>submit</button>
</form>
);
watch의 인수로 register에 등록한 id를 키 값으로 해당 입력 값을 확인할 수 있다.
formState
formState는 여러 값을 가지고 있지만 errors만 사용해봐서 errors에 대해서만 적고 나머지는 추후에(?) 업데이트할 예정
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
console.log(errors);
const onSubmit = (data) => {
console.log("submit", data);
};
const onError = (error) => {
console.log("error", error);
};
return (
<form onSubmit={handleSubmit(onSubmit, onError)}>
<input {...register("id", { required: true })} />
<button>submit</button>
</form>
);
erros를 console.log로 확인해보면 처음에는 아무 에러가 발생하지 않아 빈 객체로 존재한다.
위의 코드를 사용해서 아무 값도 입력하지 않고 에러를 발생시켜보자
이렇게 빈 객체였던 errors에 register에 입력했던 id를 키값으로 에러 상태가 추가된다.