Formik & Yup

Formik

form 라이브러리로, Formik을 사용하면 마치 Context API를 사용하는 것처럼 form이 필요한 컴포넌트를 태그로 감싸주어 props drilling 없이 '컴포넌트 내에서 전역적으로 상태 관리'를 할 수 있다

• Getting values in and out of form state: 값 상태 관리 
• Validation and error messages: 유효성 검사 
• Handling form submission: 제출 방식 제어

formik 장단점

장점

• 폼 값을 유연성있게 다룰 수 있으며, state 방식과 context 방식이기 때문에 직관적이고 쉽게 데이터 흐름을 제어할 수 있다.
• controlled component 방식이기 때문에 context api처럼 데이터를 다룰 수 있어 하나의 컴포넌트로 여러 곳에서 입력받은 데이터들을 부모 컴포넌트에서 전역으로 관리할 수 있다.
• 코드를 간결하게 구현할 수 있으며, validation 처리하는 데 있어 매우 편리한 기능을 제공한다.

단점

• react hook form 보다는 성능 측면에서 떨어짐(리렌더링)
• 부분적인 watch 처리가 불가능

---

formik 사용 방법

Formik Props

• initialValues : 폼 내에서 쓸 데이터의 기본값. 객체를 받으며, 각 key는 내부 input의 name과 대응된다. 
• onSubmit : 폼에서 Submit 이벤트가 발생했을 때 실행할 핸들러 함수를 등록한다. 
  인자는 values(입력값 객체), actions(폼의 에러상태, 제출중인 상태(submitting), 폼 리셋 등의 추가조작) 2가지를 받음
•  validatoinSchema : 유효성 검사 객체, yup을 사용해 schema로 처리하면 더 간단하게 처리 가능하다.

Render Props

• values : <input> 등의 각 name과 이에 해당하는 value들의 값을 저장하는 객체. 각 name을 key로 값을 조회 가능하며, 위의initialValutes로 초기화. 
• errors : validate 함수로 반환한 에러 정보를 저장하는 객체. 각 name을 key로 에러 메세지 조회 가능 (메세지가 있으면 에러) 
• handleSubmit : 위의 onSubmit에 등록한 핸들러 함수. <form>의 onSubmit 이벤트 핸들러로 등록 
• handleChange : 내부 엘리먼트의 값 변경을 연동하는 핸들러 함수. <input> 등의 onChange 이벤트 핸들러로 등록 
• handleBlur : 내부 엘리먼트의 focusOut 동작과 연동하는 핸들러 함수(에러 핸들링). <input> 등의 onBlur 이벤트 핸들러로 등록 
• touched : 사용자가 내부 엘리먼트와 인터렉션이 있었는지 여부를 저장하는 객체. 각 name을 key로 확인
• isValid : 유효성 여부 확인,  true/false 반환
  

---

yup 라이브러리 

yup
객체 스키마 유효성 검사 라이브러리이다. 이를 통해 간편하게 데이터의 유효성을 확인하고 검증할 수 있다.
https://www.npmjs.com/package/yup/v/1.0.0-alpha.3#api