[React] React Hook Form에 대해서...

React Hook Form

양식 유효성 검사를 위한 React Hooks

로그인 화면을 구현하다 보면, 아이디 양식(보통 이메일) 이나 비밀번호(특수문자, 자릿수제한) 양식을 제한해야 할 때가 많다.

나의 경우는, 이메일과 비밀번호를 하나의 객체로 control 하려고 했었다.

const [form, setForm] = useState({
  email: "",
  password: "",
});

그리고 validate 라는 함수를 따로 만들어서, 유효성을 검사했다. 인자로 위의 form 을 넣어주었다.

export const validate = (values: any) => {
  const errors = {
    email: "",
    password: "",
  };

  if (values.email && !values.email.includes("@")) {
    errors.email = "이메일에는 @ 가 들어가야 합니다. ";
  }
  if (values.password && values.password.length < 8) {
    errors.password = "비밀번호는 8글자 이상입니다.";
  }

  return errors;
};

그리고 이메일과 패스워드가 validation 에 통과하기 전까지는 disabled 하는 state 를 추가하였다.

const [disabled, setDisabled] = useState(true);

useEffect(() => {
  const errors = validate(form);
  handleErrors(errors);

  if (!errors.email && !errors.password) offDisabled();
  else onDisabled();
}, [form]);

그런데 react 에서는 이미 이러한 기능을 묶어둔 hook 이 있더라.

출처

https://react-hook-form.com/api/useform/