form을 그대로 이용하기보다는 react hook form을 사용하자 !

안녕하세요 !! 

오늘은 react-hook-form에 대해서 알아보면서 쓰면 얼마나 행복한지 느끼실 수 있을겁니다 !! 

이 편에서는 코드의 비교만 하겠습니다 !! 걱정하지마세요 ! 

react-hook-form에서 쓰이는 함수에 대해서는 따로 쓸 예정입니다 ! 

이번 편에서는 간단하게 코드만 비교해주세요 !! ( 너무 길어질거같아서요 ㅜㅜ ) 

 

react-hook-form이란?

 

지금까지 form에서 validation검사 및 에러메세지를 표시하려면 useState도 써야하며 maxLength, minLength등등 많은 것들을 고려하면서 써야했습니다 ! 또한 코드도 엄청나게 길어지고 고단합니다 ㅜㅜ 아마 다들 느껴보셨을겁니다

 

여기서 ! form의 validation을 더 수월하게 검사 할 수 있으며 error대응도 훨씬더 강력하게 해주는 react-hook-form을 이용하는겁니다 !! 얼마나 편한지 ! 사용 할 때와 안 사용 할 때를  비교하면서 알아보겠습니다 ! 

 

먼저 설치 ! 

npm i react-hook-form

으로 간단하게 해줍니다 ! 

 

먼저 기존 소스 ! 

import { useState } from "react";

export default function Forms() {
  // react from hook사용 안 했을 때
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [formErrors, setFormErrors] = useState("");
  const [emailError, setEmailError] = useState("");
  const onUsernameChange = (event: React.SyntheticEvent<HTMLInputElement>) => {
    const {
      currentTarget: { value },
    } = event;
    setUsername(value);
  };
  const onEmailChange = (event: React.SyntheticEvent<HTMLInputElement>) => {
    const {
      currentTarget: { value },
    } = event;
    setEmailError("");
    setEmail(value);
  };
  const onPasswordChange = (event: React.SyntheticEvent<HTMLInputElement>) => {
    const {
      currentTarget: { value },
    } = event;
    setPassword(value);
  };
  const onSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {
    // submit하기전에 고려해야하는것이 너무 많습니다 이메일이 짧으면 .... 유저이름 짧으면... 패스월드 짧으면...
    // 이렇게 스스로 하기가 너무 많고 안하는것도 있을수도 있고 고려해야할게 너무너무 많습니다 !!
    event.preventDefault();
    if (username === "" || email === "" || password === "") {
      setFormErrors("All fields are required");
    }
    if (!email.includes("@")) {
      setEmailError("email is required");
    }
  };
  return (
    <form onSubmit={onSubmit}>
      <input
        className="bg-yellow-200"
        value={username}
        onChange={onUsernameChange}
        type="text"
        placeholder="Username"
        required
        minLength={5}
      />
      {/* 위에서 required, minLength는 크롬 개발자툴에서 지우면 안먹힌다 !!! 즉 이렇게 하면 강력하지 않습니다 !  */}
      <input
        className="bg-blue-200"
        value={email}
        onChange={onEmailChange}
        type="email"
        placeholder="Email"
        required
      />
      {emailError}
      <input
        className="bg-purple-200"
        value={password}
        onChange={onPasswordChange}
        type="password"
        placeholder="Password"
        required
      />
      <input type="submit" value="생성하기" />
    </form>
  );
}

정말 길죠??? 지금 간단히 username, password, email에 대해서만 input을 만든건데도 엄청 나게 길며 또한 에러에 대해서 표시도 아직 다 적용하지 않았습니다 ! 

또한 중간에 input창에다가 required, maxLength같은것도 써놨는데요 ! 이것들은 개발자툴에서 다 지워버리고 submit하면 ? javascript에서 따로 검사를 하지 않는 이상 !  제대로 작동하지 않습니다 ! 

 

그래서 ! 여기서 react-form-hook로 더 간단하게 validation을 할 수 있습니다 ! 

import { FieldErrors, useForm } from "react-hook-form";

interface LoginForm {
  username: string;
  password: string;
  email: string;
}

export default function Forms() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<LoginForm>({
    mode: "onChange",
  });
  const onValid = (data: LoginForm) => {};
  const onInvalid = (errors: FieldErrors) => {};
  return (
    <form onSubmit={handleSubmit(onValid, onInvalid)}>
      <input
        className="bg-yellow-200"
        {...register("username", {
          required: "Username is required",
          minLength: {
            message: "5글자 이상 입력하세요",
            value: 5,
          },
        })}
        type="text"
        placeholder="Username"
      />
      {errors.username?.message}
      <input
        className="bg-blue-200"
        {...register("email", {
          required: "Email is required",
          validate: {
            notGmail: (value) =>
              !value.includes("@gmail.com") || "Gmail사용하지마세요 ",
          },
        })}
        type="email"
        placeholder="Email"
      />
      {errors.email?.message}
      <input
        className="bg-purple-200"
        {...register("password", { required: "Password is required" })}
        type="password"
        placeholder="Password"
      />
      {errors.password?.message}
      <input type="submit" value="생성하기" />
    </form>
  );
}

어떻습니까? 훨씬 간결하고 알아보기 쉽지않나요? 중복 된 함수도 없고 !! 

 

밑에는 화면입니다 ! 

생성하기를 누르면 error을 체크해준다. 물론 에러 메세지도 custom이 가능하다

저런식으로 validate를 따로 줄수도 있다 !

 

오늘은 가볍게 코드만 비교하면서 알아봤습니다 ! 

다음에는 react-hook-form의 기능에 대해서 소개하겠습니다 !