폼 라이브러리

React-Hook-Form

redux-from, react-form, formik : 제어컴포넌트 = onChange 방식으로 작성하므로 렌더링이 많이 일어남

react-hook-form : 비제어 컴포넌트 = ref를 이용해서 렌더링 횟수가 확연히 줄어듬

npm install react-hook-form

// yarn이랑 npm이랑 같이 사용하면 충돌 가능성이 있음

• handleSubmit, register를 import 해오고
  

• button의 타입을 submit으로 주고 form에 onSubmit을 주면 button이 클릭됐을때 onSubmit안의 함수가 실행되는데 함수를 handleSubmit으로 감싸주어야한다.

• handleSubmit을 사용하면 register를 사용할수 있게 되는데 이는 state와 비슷한 기능을 한다.
  {...register("사용하고자하는 이름")} 으로 사용하면 useForm안에 formState로 저장이 된다.
  

yup : 이메일, 이름 등을 자동으로 검사해주는 라이브러리

yarn add yup
// yup 다운로드

yarn add @hookform/resolvers
// yup과 react-hook-form을 연결해주는 프로그램

• 기존에 하나하나 state를 만들어서 검증해야했던 것들을 코드 한줄로 해결

  

• 상황에 맞는 에러메세지를 불러오는법 / 코드를 return안에 원하는 위치에 넣으면 됨