react hook form 사용하기

react hook form을 사용해보자

우선 설치해주고 useform을 불러오자

yarn add react-hook-form

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

사용하기

    const {register, handleSubmit, errors} = useForm()
    const emailChek = /\S+@\S+\.\S+/
    const onSubmit = data => console.log('@@data',data)
    
    <form onSubmit={handleSubmit(onSubmit)}>
    <input type="email"
           className={'input_able_btn form-common'}
           ref={register({
               required: true,
               validate: {
                   isEmail: (v) => emailChek.test(v)
               }
           })}
           name={'email'}
           id={'email'}/>
    </form>

• userForm에서 register, handlesubmit, errors를 가져온다
• register에는 기본적으로 옵션으로 required같은것도 지원하고 validate를 통해서 위 코드처럼 이메일 검사 같은것도 가능하다
• handleSubmit을 통해서 onSubmit같은 함수로 넘어온 data확인
• errors에서 ref결과를 바로바로 확인이 가능

사용후기

• 우선 속도가 빠르다 🙌
• 저런식으로 input, form 태그에 바로바로 붙여서 사용하면 되니 사용하기도 매우 쉽다
• 바로바로 체크해줘서 너무 좋다
• 유효성 검사할때 너무너무 좋다