[ React ] react-hook-form

🔴  Introduction

⚪  form의 validation을 도와주는 라이브러리

 

🟠  Official

시작하기

 

🟡  Install

 

npm i react-hook-form

 

🟢  Usage

 

import "./styles.css";
import { useForm } from "react-hook-form";

export default function App() {
  const {
    register, // input에 react-hook-form 등록
    handleSubmit, // register에 등록된 input 데이터를 form에서 처리할 함수
    formState: { errors }, // 개별 input에 대한 errors 반환
    setError // 커스텀 유효성에 대한 Error를 설정할 수 있음
  } = useForm({
    defaultValues: {
      // input에 기본값 입력
      email: "@naver.com"
    }
  });

  const onValid = (data) => {
    console.log(data);
    // input의 data들이 인자로 주어짐
    if (data.password !== data.passConfirm) {
      setError(
        "passConfirm", // 개별 요소에 에러를 전달해줌
        { message: "Password are not the same" }, // 에러 메시지
        { shouldFocus: true } // 에러가 발생한 input에 focus 적용
      );
    }
  };

  const onError = (error) => {
    console.log(error);
  };

  return (
    <div className="App">
      <form
        style={{ display: "flex", flexDirection: "column" }}
        onSubmit={handleSubmit(onValid, onError)}
      >
        {/* 📁 Form 1 : Email */}
        <input
          {...register("email", {
            required: "Email is required", // false 시 에러 메시지
            pattern: {
              // 정규식 표현을 넣을 수도 있다.
              value: /^[A-Za-z0-9._%+-]+@naver.com$/,
              message: "Only naver.com emails allowed"
            }
          })}
          placeholder="Email"
        />
        <span>{errors?.email?.message}</span>

        {/* 📁 Form 2 : firstName */}
        <input
          {...register("firstName", {
            required: "write here",
            validate: {
              // 커스텀 개별 유효성 함수 적용 가능
              noRyong: (value) =>
                value.includes("ryong") ? "no ryong allowed" : true
            }
          })}
          placeholder="First Name"
        />
        <span>{errors?.firstName?.message}</span>

        {/* 📁 Form 3 : lastName */}
        <input
          {...register("lastName", { required: "write here" })}
          placeholder="Last Name"
        />
        <span>{errors?.lastName?.message}</span>

        {/* 📁 Form 4 : password */}
        <input
          {...register("password", { required: "write here", minLength: 5 })}
          placeholder="Password"
        />
        <span>{errors?.password?.message}</span>

        {/* 📁 Form 5 : passConfirm */}
        <input
          {...register("passConfirm", {
            required: "write here",
            minLength: {
              value: 5,
              message: "Your password is too short."
            }
          })}
          placeholder="passConfirm"
        />
        <span>{errors?.passConfirm?.message}</span>

        <button>Add</button>
        <span>{errors?.extraError?.message}</span>
      </form>
    </div>
  );
}

/* react-hook-form을 사용하지 않을 때의 코드
const App = () => {
  const [toDo, setToDo] = useState("");
  const [toDoError, setToDoError] = useState("");
  const onChange = (event) => {
    const {
      currentTarget: {value},
    } = event;
    setToDoError("");
    setToDo(value);
  };
  const onSubmit = (event) => {
    event.preventDefault();
    if (toDo.length < 10) {
      return setToDoError("To do should be longer");
    }
    console.log("submit");
  };
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input onChange={onChange} value={toDo} placeholder="Write a to do" />
        <button>Add</button>
        {toDoError !== "" ? toDoError : null}
      </form>
    </div>
  )
}
*/