리액트에서 Form을 만들어 사용할 때 유효성 검사를 쉽게 할 수 있도록 도와주는 라이브러리가 있다.
useForm()의 mode 옵션
const [] = useForm({mode:'onBlur'})useForm props 중 mode 옵션으로는 onBlur, onChange, onSubmit 등이 들어갈 수 있다.
- onBlur : input이 focus를 잃으면 유효성 검사
- onChange : input 입력할 때마다 유효성 검사
- onSubmit : 제출 버튼 누르면 유효성 검사
내 경험상 onBlur가 사용자 경험에 가장 좋을 것같다.
onChange는 맞게 입력 중일때도 계속 에러가 떠있으니까 뭔가 신경쓰일 것같고, onSubmit은 제출 버튼을 누르고 나서야 잘못됨을 알려주니까 다 했는데 왜 이제 알려줌? 이런 느낌으로 좀 짜증날듯?
formState : {errors}
유효성 검사를 통과하지 못했을 때 라이브러리에서 제공하는 에러를 사용할 수 있다.
유효성 검사 내용은 이런 식으로 표현하고,
{errors.email.message}유효성 검사 div는 이렇게 표현한다.
{errors?.email && (
<div>
<span>{errors.email.message}</span>
</div>
)}errors가 있으면 보여줘라~~ 느낌
Hello, World