react-hook-form과 yup

리액트에서 폼을 검증하고 값을 관리하기 위해서 사용하는 폼 라이브러리 중 가장 사용하기 쉽고 성능적으로 좋은 라이브러리는 react-hook-form이다.

react-hook-form

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

기존의 폼에서는 각각의 input에 setState를 포함한 onChange 함수를 바인딩했었다. 이 때 input에 내용을 입력하면 한 글자 한 글자 입력할 때마다 setState가 실행되고 리렌더링이 실행되어 굉장히 비효율적이었다. react-hook-form은 input의 값을 실시간으로 state에 반영하는 것이 아니라 등록함수가 실행 될 때 ref를 사용해 한번에 처리하기 때문에 불필요한 렌더링이 일어나지 않아 빠르고 효율적이다.

비제어 컴포넌트 vs 제어 컴포넌트

• 비제어 컴포넌트 : submit 함수를 실행할 때 input 값을 한번에 변경하는 방식.
  useRef 등이 비제어 방식이고 단순한 폼에 사용하는 것이 좋다.
• 제어 컴포넌트 : 사용자의 입력을 기반으로 state를 실시간으로 관리하는 방식(setState)
  중요하고 복잡한 폼에는 제어 컴포넌트를 사용하는 것이 좋다.

react-hook-form의 기본값이 비제어 방식인 것이고 mode를 onChange로 둔다면 제어 컴포넌트로 사용할 수 있다.

yup

react-hook-form도 검증 기능을 제공하지만 훨씬 복잡하고 까다로운 검증과정을 하기엔 어렵다. yup은 그런 검증 과정을 도와주는 라이브러리다.

🔗 공식 홈페이지 - https://www.npmjs.com/package/yup
🔗 react-hook-form과 함께 쓸 때 - https://react-hook-form.com/get-started#SchemaValidation

yarn add @hookform/resolvers yup

react-hook-form과 yup을 함께 쓰려면 @hookform/resolvers를 같이 설치해야한다.

import * as yup from 'yup'
import {useForm} from 'react-hook-form'
import {yupResolver} from '@hookform/resolvers/yup'

const schema = yup.object().shape({
	email : yup.string().email('이메일 형식이 적합하지 않습니다.').required('필수 입력값입니다.')
	password : yup.string().min(4,'비밀번호는 최소 4자리 이상입니다.').max(15,'비밀번호는 최대15자리 입니다.').required('필수 입력값 입니다.') 
})

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

schema는 yup.ts 파일 생성 후 그 안에 모아서 validation 폴더 안에 위치시키는게 일반적인 것 같다. 최종적으로 폼에 에러가 없을 때 버튼을 활성화하려면 formState의 isValid를 사용하면 된다.