npm을 이용한 react-hook-form 설치

• npm install react-hook-form --save

react-hook-form 사용법

• watch : react-hook-form에서 가져오는 메소드
  • 값으로 넣은 것에 무슨일이 일어나고 있는지 확인하기 위한 메소드
  • 위 코드에서는 example이 무슨 일이 일어나고 있는지 확인
  • 관찰 할 경우에는 등록해주어야만 관찰할 수 있다.
  • 위 코드에서 ref={register}부분
• required : true : 반드시 입력해야한다.
• maxLength : 10 : 10글자 이상은 안된다.
• name="exampleRequired" 에서 에러가 나면 즉 errors.exampleRequired가 있으면 렌더링을 해준다.

onChage 모드

• submit 하기 전에는 유효성 체크를 하지 않는다.
• submit 버튼을 누르면 유효성 체크에 위반 되는 것만 에러를 나오게 한다.

예시

• email

  • required: true,pattern:/*^*\\S+@\\S+*$*/i
  • pattern : /*^*\\S+@\\S+*$*/i → 이메일의 정규식을 나타냄

• validate 관련

  • 다음 코드들을 추가 시켜줬음
    • *import* React,{useRef} *from* 'react'
    • react에서 useRef를 가져와서 사용
  • const password = useRef();
    • password는 가져온 useRef()에서 참조
  • password.current = watch("password");
    • password의 현재값을 지켜봄

• {...register("password_confirm",{ required: true, validate:(value) => value === password.current })}/>

  • value는 password-confirm 의 입력값
  • password.current는 password의 입력값

//import 값
import {useRef} from 'react'

//validate로 인한 위에 추가된 코드
//전역으로 선언 -> return 밖에
const password = useRef();
password.current = watch("password");

//예시
<form onSubmit={handleSubmit(onSubmit)}>
<label>Email</label>
<input
      name="email" 
      type="email"  
      {...register("email", { required: true,pattern:/^\\S+@\\S+$/i})}/>
      {errors.email && <p>This field is required</p>}
          
 <label>Name</label>
 <input
      name="name"
      {...register("name",{ required: true,maxLength:10})}/>
      {errors.name && errors.name.type === "required" 
         && <p>This name field is required</p>}
      {errors.name && errors.name.type === "maxLength" 
         && <p>Your input exceed maximum length</p>}
          
<label>Password</label>
<input
      name="password"
      type="password"
      {...register("password",{ required: true,minLength:6})}/>
      {errors.password && errors.password.type === "required" 
         && <p>This password field is required</p>}
      {errors.password && errors.password.type === "minLength" 
         && <p>Password must have at least 6 characters</p>}

<label>Password Confirm</label>
<input
       name="password_confirm"    
       type="password"
       {...register("password_confirm",{ required: true, validate:(value) => value === password.current })}/>
       {errors.password_confirm && errors.password_confirm.type === "required" 
          && <p>This password confirm field is required</p>}
       {errors.password_confirm && errors.password_confirm.type === "validate" 
          && <p>The password do not match</p>}
<input type="submit" value={"submit"}/>
<Link style={{color:"gray",textDecoration:'none'}} to="/login">이미 아이디가 있다면...</Link>
</form>