Simple form validation with React Hook Form 에 관한 글

설치법

npm install react-hook-form

React Hook Form 을 쓰는 것이 좋은 이유

function ToDolist() {
  const [toDo, setToDo] = useState("");
  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    //console.log(event.currentTarget.value);
    const { value } = event.currentTarget;
    setToDo(value);
  };
  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log(toDo);
    setToDo("");
  };
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={toDo}
          type="text"
          placeholder="write your todo"
        />
        <button>Add</button>
      </form>
    </div>
  );
}

이렇게 기존의 방식처럼 하나의 인풋과 폼에 설정해야하는 state가 많고 만약 아이디 비밀번호 주소 닉네임 이름 등 여러개의 input이 필요한 경우에 위의 방법으로 하기에는 만만하지 않은 코드의 양이 필요할 것입니다.

 

그래서 React Hook Form이 나오게 되었습니다.

 

사용법

 

1. import 해주기

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

 

2. useForm() 사용해주기

  const { register, handleSubmit, watch, formState: { errors } } = useForm();

 

2-1. input에 register 사용

 

        <input {...register("password")} placeholder="Password" type="text" />

input {...register("원하는 내용")} 을 설정해주면 기존의 useState 를 사용하는 것과 같이 password 라는 key 값에 value가 저장됩니다.

 

2-2 register에 다양한 옵션 부여 가능

<input
          {...register("email", {
            required: "Email is required",
            pattern: {
              value: /^[A-Za-z0-9+-.%_]+@naver.com/,
              message: "Only naver.com emails allowed",
            },
            minLength: 5,
          })}
          placeholder="Email"
        />

{... register("원하는key값" , { required : true( true 대신에 문자열을 적어 에러내용을 적을 수 있습니다) ,

pattern:{

value: 원하는 값( 예를들어 naver.com 이메일만 받고 싶다 싶으면 pattern의 value 값에 저장하여 원하는 값만 받을 수 있습니다.)

,massage : 원하는 값을 안넣고 사용자가 잘못 입력하였을 때 에러 메세지 출력할 값을 저장할 수 있습니다.

},minLength :5 혹은 minLength:{

value: 5,

message:오류가 났을 때 메세지 출력할 값 저장

} 으로 사용할 수 있습니다.

})}

 

minLength, maxLength 등 Html input 값에 설정할 수 있지만 사용자 입장에서 코드소스를 변경하여 제출할 수도 있으므로 register 안에 넣는 것이 안전합니다.

 

2-3 regiset에 원하는 값을 받을 수 있는  validate(입증하다) 를 설정할 수 있습니다.

<input
          {...register("firstName", {
            required: "write here",
            validate: {
              noNico: (value) =>
                value.includes("asdf") ? "no asdf allowed" : true,
              noNick: (value) =>
                value.includes("zxcv") ? "no zxcv allowed" : true,
            },
          })}
          placeholder="First Name"
        />

{...register("key" , { validate :{

이름 : value => true or false 로 결과가 나오는 값 을 설정함으로써 부적절한 값을 넣을 경우 에러메세지를 출력할 수 있습니다.

}}

 

3.Form 에 handelSubmit 함수 사용하기

<form
        onSubmit={handleSubmit(onVaild)}
      >

 

3-1 Form 에 들어올 interface type값 알려주기 , 또한 default 값 설정이 가능합니다.

interface IForm {
  email: string;
  nickName: string;
  password: string;
  password1: string;
}

export function ToDoList() {
  const {
    register,
    watch,
    handleSubmit,
    formState: { errors },
  } = useForm<IForm>({ defaultValues: { email: "@naver.com" } });

 

 

3-2 handleSubmit에는 onVaild 의 기능을 하는 함수가 필요합니다. 

const onValid = (data: IForm) => {
    if (data.password !== data.password1) {
      setError(
        "password1",
        { message: "Password are not the same" },
        { shouldFocus: true }
      );
    }
    // setError("extraError", { message: "Server offline." });
  };

이런 함수 값으로 password 입증이 틀렸다고 setError("key값", {message : 오류메세지 저장}, {shouldFocus : true( 틀린곳에 자동으로 포커스 기능을 할것인지) })을 통해 도움을 받을 수 있습니다.

 

또한 setError()을 통해 서버가 오프라인 되었을 경우 전역 오류 메세지를 출력할 수도 있습니다.

 

3-3 setValue 를 이용하여 key 값의 value를 변경할 수 있습니다.

  const { register, handleSubmit, setValue } = useForm<IForm>();
  const handleVaild = (data: IForm) => {
    console.log("add to do", data.toDo);
    setValue("toDo", "");
  };

setValue("key값", 변경하고자 하는 내용) 을 활용할 수 있습니다

 

4. errors 활용하여 에러 메세지 출력하기

  const {
    register,
    watch,
    handleSubmit,
    formState: { errors },
  } = useForm<IForm>({ defaultValues: { email: "@naver.com" } });
  
<span>{errors.email?.message}</span>

errors.email?.message 를 통해 위의 formState : {errors} 를 통해 erorrs라는 변수를 설정한 것을 활용할 수 있습니다.

 

주의할 점은 errors? 혹은 errors.email? 에 ?를 붙혀줘야 에러가 없을 때 타입스크립트가 문제를 일으키지 않습니다.

 

5. watch() 를 통해 어떻게 submit 과 value 저장이 진행되는지 확인할 수 있습니다.

  console.log(watch());

 

 

https://react-hook-form.com/get-started

Get Started

 

느낀 점

 

react hook form 은 정말 form 문을 리액트로 이용할 때 없어서는 안될 좋은 라이브러리인 것 같습니다.

 

만약 onSumbit onChange useState 등으로 회원가입 form 을 만든다고 하였을 때 작업속도에 차이가 확연히 날 것 같습니다.