React Hook Form 사용해보기

🤓 리액트 훅 폼이란?

리액트에서 form의 validation을 빠르고 쉽게 도와주는 라이브러리이다.
전체 폼이 랜더링 되지 않고 각각의 입력값의 유효성 체크를 할 수 있다.

input 요소가 여러 개일 때, 한 input의 유효성 상태 변경 때문에 모든 컴포넌트가 리렌더링 될 필요는 없다. 그렇기 때문에 리렌더링이 필요한 컴포넌트만 분리하여, 리렌더링되는 범위를 좁히는 방법이 많이 쓰인다.

❌ 리액트 훅폼을 사용하지 않은 경우

리액트 훅폼을 사용하지 않은 경우:
입력된 각각의 데이터를 직접 가져와 유효성 검사 값을 나타낼 state까지 만들어 주어야 한다.

const Componet = () => {
	const [value, setValue] = useState('');
	const onChangeValue = () => {
			setValue(value);
	}
	const onSubmit = () => {
			if(!value.includes("@"){
				alert("이메일 주소는 @를 포함하고 있어야 합니다")
			}
	}
	
	return (
		<form onSubmit = {onSubmit} >
			<input value = {value} onChange = {onChangeValue} placeholder = "test@test"/>
		</form>

🙆 리액트 훅폼을 사용한 경우

(전체 코드를 사용해 길어보이지만, input 코드 하나만 보면 간결해진 것이 눈에 띌 것임)
불필요한 리랜더링이 방지되고, 입력 받고 있는 요소만 랜더링이 된다.
함수를 따로 만들지 않아도 되고 코드가 간결해진다.

const Component = () => {
  const { register, watch, errors, handleSubmit } = useForm();

  const password = useRef();
  password.current = watch("password");

  // onSubmit은 리액트 훅폼에서 가져옴
  const onSubmit = () => {
    axios.post("/", data);
  };

  // email이라는 name의 element를 관찰 > 콘솔에서 출력해줌
	console.log(watch("email"));
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        name="email"
        type="email"
        // required : true > 무조건 무언가를 써줘야함
        // 최대 길이 10
        // register는 조건을 등록해준다.
        // pattern은 이메일 형식 > 정규 표현식
        ref={register({ required: true, maxLength: 10, pattern: /^\S@\S+$/i })}
      />
      {/** 이메일에 에러가 날 때 보이는 */}
      {errors.email && errors.name.type === "required" && (
        <p>This email field is required</p>
      )}
      <input
        name="password"
        type="password"
        ref={register({
          required: true,
          minLength: 6,
        })}
      />
      <input
        name="password_confirm"
        type="password_confirm"
        ref={register({
          required: true,
          // validate 값을 체크해준다. 
          validate: (value) => value === password.current,
        })}
      />
    </form>
  );
};

react-hook-form에서 제공하는 직관적인 유틸로 대체했을 때 전체적인 코드가 크게 줄어들고, 단순해져 가독성이 좋아지는 이점이 있다.