[nextjs+ts]프로젝트 05.로그인 페이지 react-hook-form을 활용한 리펙토링

[nextjs+ts]프로젝트 05.로그인 페이지 react-hook-form을 활용한 리펙토링

react-hook-dom을 활용하면 간편하게 form을 수정할 수 있다.

 

#react-hook-form 설치

//일반적인 버전 설치
$ npm i react-hook-form 

//rc버전 설치
$ npm i react-hook-form --legacy-peer-deps

 

#Input Component 구현

-interface를 정의하여 property 넘기기

-UserFormRegisterReturn 파라미터로 활용하여 react-hook-form에 있는 정보를 넘겨 받기

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

interface InputProps{
    label:string;
    name:string;
    type:string;
    register:UseFormRegisterReturn;
    required:boolean;
}

export default function Input({label,name,register,
type,
required

}:InputProps){
    return( <div className="flex flex-col  p-2 pt-0">
    <span className="p-1 text-xs font-extrabold text-gray-500">
      {label}
    </span>
    <input required={required} {...register} type={type} className=" peer h-8 border-2"></input>
    <span className="hidden text-xs font-medium text-red-600 peer-invalid:block">
      {name}
    </span>
  </div>);
}

 

#Login 페이지 구현

-EnterForm 인터페이스를 구현하여 Submit하면 넘겨받을 데이터 정의

-onValid를 통하여 Submit하면 받을 함수 정의

-useForm훅을 이용하여 react-hook-form의 다양한 기능 정의

 

 interface EnterForm {
    email?: string;
    password?: string;
  }

  const onValid = (data: EnterForm) => {
    console.log(data.email);
    console.log(data.password);
  };

  const { register, handleSubmit, reset, watch } = useForm<EnterForm>();
  console.log(watch());
  return (
    <div className="flex flex-col items-center rounded-3xl bg-white pb-10">
      <div className=" p-10 text-2xl font-bold">
        <span>@SamsungEngineering CMS</span>
      </div>
      <form onSubmit={handleSubmit(onValid)}>
        <Input
          register={register("email", {
            required: true,
          })}
          name="아이디를 입력해주세요"
          label="아이디"
          type="text"
          required
        />
        <Input
          register={register("password", {
            required: true,
          })}
          name="패스워드를 입력해주세요"
          label="패스워드"
          type="password"
          required
        />
        <div className="mt-5 flex items-center   justify-center ">
          <input
            className=" h-10 w-64 rounded-sm bg-gray-300 text-sm font-medium text-white hover:bg-red-200 "
            type="submit"
            value="로그인"
          />
        </div>
      </form>
      <div className="mt-8 flex flex-col items-center justify-center">
        <span className="text-sm">
          문의가 있는 경우, 아래의 이메일로 연락부탁드립니다.
        </span>
        <span className="text-sm">test@gmail.com</span>
      </div>
    </div>
  );
};

export default Test;

 

#react #nextjs #react-hook-form #리액트 #로그인 #login #form