[TIL] 10월 7일 ReactHookForm(yup)

게시글 입력, 로그인, 회원가입 등의 과정을 구현하면서 공통적으로 사용되었던 내용들중 하나가 바로 검증이다.
이메일 입력부분에 입력이 되었는지, '@'가 필요한지, 최소 자리수를 만족하는지 등등

이러한 조건들을 사용하려면 if문으로 제어를 해줘야 했고, 정규표현식을 변수에 담아서 사용하기도 했다.

조건이 많아지면 많아질수록, if문은 길어지고 관리가 어려워 질수 있다.

등록은 ReactHookForm, 검증은 yup이라는 라이브러리를 사용하면 된다.

ReactHookForm 설치

폼라이브러리를 사용하면 힘들게 만들었던 입력폼을 보다 손쉽게 사용할수 있다.

폼라이브러리의 종류는 대표적으로

react-form, redux-form, react-hook-form, formik 등등 종류가 많고

함수형 컴포넌트와 hook을 사용하는 경우 가장 쉽고 성능적으로 좋은 폼 라이브러리는 react-hook-form 이다.

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

위주소를 접속해 react-hook-form을 설치한다.

npm install react-hook-form

검증을 활용하기 위해 hookform resolvers도 설치한다.

npm install @hookform/resolvers yup

hook-form을 이용해 입력폼 만들기

container 전체코드

import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { schema } from "./Myform.validations";
import MyFormUi from "./Myform.presenter";
export default function Myform() {
  const { handleSubmit, register, formState } = useForm({
    mode: "onChange",
    resolver: yupResolver(schema),
  });
  function onClickLogin(data) {
    console.log(data);
  }
  return (
    <MyFormUi
      handleSubmit={handleSubmit}
      onClickLogin={onClickLogin}
      register={register}
      formState={formState}
    />
  );
}

훅폼을 사용하기 위해서 필요한 useForm, yupResolver, schema를 불러온다.

useForm의 특성중 handleSubmit, register, formState를 이용해 등록할 내용들을 설정하고
yupResolver, schema 를 통해서 검증할 내용들을 설정한다.

Myform이라는 함수 안에

const { handleSubmit, register, formState } = useForm({
    mode: "onChange",
    resolver: yupResolver(schema),
  });

이렇게 작성해준다.

기존에는 입력창마다 onChange함수를 걸고 검증하려면 if문을 작성해 코드가 길어졌는데 이렇게 하면 해당부분들을 모두 합쳐서 사용하는 효과가 있다.

vaildation 전체코드

import * as yup from "yup";
export const schema = yup.object().shape({
  myEmail: yup
    .string()
    .email("이메일 형식이 적합하지 않습니다.")
    .required("반드시 입력해야하는 필수 사항입니다."),
  myPassword: yup
    .string()
    .min(4, "비밀번호는 최소 4자리 이상입니다.")
    .max(15, "비밀번호는 최대 15자리 입니다.")
    .required("비밀번호는 반드시 입력해 주세요"),
});

입력시 폼의 입력형태, 요구사항들, 변수이름등등을 정해주는 곳이다.
폼의 최소 자리수, 최대 자리수, email형식 등을 정해줄수 있고 정규표현식 또한 이곳에서 정의할수 있다.

이곳에서 정의한 내용을 토대로 입력폼을 검증한다.

presenter 전체코드

import Button01 from "../../commons/buttons/01/Button.01";
import Input01 from "../../commons/inputs/01/Input.01";
export default function MyFormUi(props) {
  return (
    <form onSubmit={props.handleSubmit(props.onClickLogin)}>
      <div>리액트 훅 폼 연습!!</div>
      이메일 : <Input01 type="text" register={props.register("myEmail")} />
      <div>{props.formState.errors.myEmail?.message}</div>
      비밀번호 :{" "}
      <Input01 type="password" register={props.register("myPassword")} />
      <div>{props.formState.errors.myPassword?.message}</div>
      <Button01
        type="submit"
        isValid={props.formState.isValid}
        name="로그인하기"

        로그인하기
      </Button01>
    </form>
  );
}

presenter에서는 정의한내용에 맞게 바인딩해주면 된다.

form의 영역을 form 태그로 감싸주고 onSubmit속성을 통해서 handleSubmit, onClick함수를 작성해 준다.

 <form onSubmit={props.handleSubmit(props.onClickLogin)}>
 </form>

이렇게 작성해주면 되며 hook-form 방식에서는 button에 onClick을 걸지 않아도 된다.

이제 각각의 입력폼에 대한 정보를 감지해야 한다.

 이메일 : <Input01 type="text" register={props.register("myEmail")} />
      <div>{props.formState.errors.myEmail?.message}</div>
      비밀번호 :{" "}
      <Input01 type="password" register={props.register("myPassword")} />
      <div>{props.formState.errors.myPassword?.message}</div>
      <Button01
        type="submit"
        isValid={props.formState.isValid}
        name="로그인하기"
      >

기존에는 각각의 필드를 onChange 함수를 통해 event.target.value로 입력값을 확인후 state에 저장시켰다.

hook-form 라이브러리는 register라는 속성을 통해서 validation에서 정의한 이름을 작성해주면 아주 간단하게 끝난다.

register={props.register("myEmail")}