프론트엔드/리엑트

리액트 Formik / Yup

후누피 2023. 6. 26. 10:38
728x90

일단 Validation 이란 서버에 데이터를 제출하기 전에 양식이

올바른지 확인하는 과정이라고 할 수 있다.

사용자가 데이터를 목적지로 보내기 전에,

올바른 데이터를 입력했는지, 유효성을 체크해주는 것이다.


Formik?

● 리엑트에서 간단하게 form을 만들 수 있게 해주는 Node.js 패키지
   recat-hook-form과 달리 조건을 한군데에 모아서 적어줄 수 있다.

 

특징

  • 가장 많이 사용되는 라이브러리이다.
  • 사용하기 쉽다
  • provider 방식으로 form 내에 있는 모든 컴포넌트들이 동일한 상태를 공유한다.
  • 유효성 체크를 위해 yup와 함께 사용한다.

단점

  • 복잡한 form을 다루기 어렵다
  • 특정 state만 watch할 수 없고 전체를 업데이트한다.
  • 불필요한 re-rendering 발생한다.

YUP?

● 유효성 검사를 보다 쉽게 도와주는 라이브러리.
   최소 길이, 최대 길이, 필수 여부에 따라 그에 맞도록 에러메세지를 뱉을 수 있다.

 

728x90