[React] React Form library Formik 학습

왜 Formik library를 사용할까?

React에서 많이 쓰는 Form library인 Formik을 학습하려고 한다.  학습하기에 앞서 공식 Formik Hompage에서 왜 Formik library를 사용하는지 알아 보았는데 그 이유는 React에서 form은 매우 장황( 사용하기 덜 직관적인으로 해석하면 되려나 .. )하고 비용( 무겁다고 해석 하면 될듯 ?)이 많이 들기 때문이라고 한다. 즉  Formik LIbrary를 사용하면 react에서 Form을 좀 더 쉽고 정돈된 형태로 사용 할 수 있다고 한다. 더군다나 이 libarary는 매우 가볍다고 나와 있다 ( 아래에 내용이 나와 있다. - 하단 참고 ) 

 

https://formik.org/docs/overview

Overview | Formik

 

Formik tutorial 진행 ( https://formik.org/docs/overview  참고) 

 

Formik을 온전히 이해하기 위해 tutorial에서 제공하는 code를 순차적으로 따라하면서 이해했습니다. 

공식 hompage에서 제공하는 튜토리얼을 따라하다 보면 code의 흐름은 아래 처럼 stetp 1, 2, 3, 4 로 갈수록 code의 양이 줄어들고 직관적인 code가 됩니다. 실제로 사용할 때 4번째 code 양식을 사용하면 될 것 같다는.. 

아무튼 굳이 순서대로 따라가다 보면 어떻게 Formik의 api가 작동하는 지 알 수 있습니다. 참고로 step4에서 label, Field, ErrorMessage가 반복되는데 이 역시도 useField라는 api를 통해 중첩되는 code를 줄 일 수 있습니다. ( 공식홈페이지 tutorial 파트 하단부 참고 ) 

 

구현하고자 하는 Form의 형태는 아래 하단과 같다 ( step1, 2, 3, 4 code로 구현된 형태와 모두 동일하다 ) 

 

1. setp1  useFormik 사용 

2. setp2 useFormik + Yup ( 유효성 검사 library ) 사용 

3. setp3 Formik + Yup ( 유효성 검사 library ) 사용 

4. setp4 Formik, Field, Form, ErrorMessage + Yup ( 유효성 검사 library ) 사용