- Formik의 간단한 사용법
- yup을 사용하여 유효성 체크
- 커스텀 인풋 컴포넌트를 만들고 피드백 컴포넌트와 연결하기
Formik은 Provider를 통해 상태와 메소드를 ui에 공유합니다. 따라서 form내에 있는 모든 컴포넌트들이 동일한 상태를 공유하게 됩니다.
오늘 만들어볼 예제 페이지의 컴포넌트 트리를 보면 FormikContext라는 것이 제공되는것을 볼수 있습니다. 이 컨텍스트 내부에 무엇이 있는지 살펴보겠습니다.
- values는 현재 form에서 공유되는 상태값을 의미합니다. 인풋들이 setFieldValue메소드를 통해 이 values값을 변경하게 되고 이는 form내 어디서든 접근이 가능합니다.
- initialValues는 설정한 최초값입니다. react 인풋을 상태관리하려면 항상 vlaue가 제공되어야 하기때문에 최초값으로 인풋의 이름과 기본값을 설정해두게 됩니다.
- error는 form에 설정된 유효성 체크에 따른 에러 여부를 객체 형태로 보관합니다.
- touched는 해당 인풋이 클릭되었는지를 저장합니다. error와 touched를 조합하여 피드백을 줄것입니다.
이것은 공식홈페이지에서 제공하는 튜토리얼입니다. 내부를 살펴보면 Formik 컴포넌트 내에서 initialValues, onSubmit, validationSchema를 지정해주는것을 확인할 수 있습니다. 또한 props를 Form 컴포넌트에 전달하여 지정된 메소드들을 사용하고 있습니다.
이렇게 Form 내부에서 input 태그를 바로 사용하는 방법도 있지만, 미리 컴포넌트로 제작해두면 사용이 더욱 간편해집니다. 오늘의 예제코드를 살펴보겠습니다.
상품을 등록하는 form을 가정하고, 상품의 id, 이름 등을 입력할수 있는 initialValues를 생성했습니다. 그리고 formik 라이브러리의 Field 컴포넌트를 이용하여 별도로 인풋을 지정해 주었습니다.
인풋 컴포넌트 내부에서는 필드의 props를 input태그에 전달하여 인풋이 form 내에서 작동되도록 했습니다. 컴포넌트 내부에 FieldFeedback을 통해 피드백을 보여주도록 했습니다.
오늘은 인풋 컴포넌트를 제작해 보았는데요, 이와 같은 방식으로 셀렉트 박스, 라디오 인풋 등 다양한 인풋을 컴포넌트로 제작해두면 사용이 편리합니다. 다음에 기회가 되면 다른 인풋들도 포스팅해보겠습니다.
