Formik 및 Formik 구성 요소 및 Yup 검증에 관한 모든 것

포믹이란?

Formik은 ReactJS 또는 React Native를 위한 무료 오픈 소스 경량 라이브러리이며 양식 생성의 세 가지 주요 문제를 해결합니다.

양식 상태가 조작되는 방식입니다.

양식 유효성 검사 및 오류 메시지가 처리되는 방식입니다.

양식 제출이 처리되는 방식입니다.

왜 포믹인가?

React 또는 ReactJS에서 양식을 만들려면 필요한 항목과 각 양식 필드를 관리하는 방법에 따라 상당한 양의 코드가 필요할 수 있습니다. 결과적으로 개발자는 항상 자신의 삶을 더 쉽게 만들어주는 도구를 찾고 있습니다. 이러한 도구 중 하나는 React의 Formik입니다.

Formik은 양식의 상태를 추적한 다음 몇 가지 재사용 가능한 메서드 및 이벤트 핸들러(handleChange, handleBlur 및 handleSubmit)를 소품을 통해 양식에 노출합니다. handleChange 및 handleBlur는 정확히 예상대로 작동합니다. name 또는 id 속성을 사용하여 업데이트할 필드를 파악합니다.

Formik 세부 사항에 대해 자세히 알아보고 Formik에서 가장 중요한 부분에 대해 이야기해 봅시다.

설치

NPM 또는 Yarn으로 Formik을 설치할 수 있습니다.

고궁

npm install formik --save

또는

yarn add formik

Formik 구성 요소

<형태 />

Form은 Formik의 handleSubmit 및 handleReset에 자동으로 연결되는 HTML<form> 요소 주변의 작은 래퍼입니다. 다른 모든 소품은 DOM 노드로 직접 전달됩니다.

<포믹 />

양식 작성에 도움이 되는 구성 요소입니다. React Motion 및 React Router와 같은 라이브러리에서 널리 사용되는 렌더링 소품 패턴을 사용합니다. 양식의 모든 필드를 초기화하는 ValidationSchema 및 InitialValue와 값을 매개변수로 사용하는 onSubmit을 수락하며 주로 포스트 api 호출에 사용되어 데이터를 수집합니다. 양식에서 벗어나 서버에 데이터를 저장할 수 있습니다.
<Formik /> 핸들 소품을 <Form />에 전달하면 {errors,isValid,handleChange,touched ..etc}와 같은 양식을 처리하는 데 도움이 됩니다.

import React from 'react';
import { Formik } from 'formik';

const BasicExample = () => (
  <div>
    <h1>My Form</h1>
    <Formik
      initialValues={{ name: 'jared' }}
      onSubmit={(values) => {
      console.log(values)}
    >
      {props => (
        <form onSubmit={props.handleSubmit}>
          <input
            type="text"
            onChange={props.handleChange}
            onBlur={props.handleBlur}
            value={props.values.name}
            name="name"
          />
          {props.errors.name && <div id="feedback"> 
          {props.errors.name}</div>}
          <button type="submit">Submit</button>
        </form>
      )}
    </Formik>
  </div>
);

<필드 />

<Field />는 입력을 Formik에 자동으로 연결합니다. 이름 속성을 사용하여 Formik 상태와 일치시킵니다. <Field />는 HTML<input /> 요소로 기본 설정됩니다.

다음을 사용하여 필드 표시를 변경할 수 있습니다.

//display html dropdown list
<Field as="select" name="color">
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
 </Field>

또는 <Field />에 전달된 사용자 정의 html 요소를 추가할 수 있으며 모든 추가 소품이 전달됩니다.

// field:An object containing onChange, onBlur, name, and value of 
//   the field
// form:The Formik bag{ name, value, onChange, onBlur }
// meta:An object containing metadata (i.e. value, touched, error, and initialValue)
<Field name="lastName">
    {({field, form , meta }) => (
           <div>
             <input type="text" placeholder="Email" {...field} />
             {meta.touched && meta.error && (
             <div className="error">{meta.error}</div>
             )}
           </div>
     )}
 </Field>

<오류 메시지 />

<ErrorMessage />는 해당 필드를 방문한 경우(예: touched[name] === true)(그리고 오류 메시지가 있는 경우) 해당 필드의 오류 메시지를 렌더링하는 구성 요소입니다. 주어진 필드에 대한 모든 오류 메시지가 문자열로 저장될 것으로 예상합니다.

// field has been touched and an error exists and subsequent updates.
 <ErrorMessage name="email">
   {msg => <div>{msg}</div>}
 </ErrorMessage>

이제 Formik에 사용자 지정 유효성 검사 및 오류 메시지를 전달하는 방법에 대해 Formik에서 가장 중요한 부분에 대해 이야기해 보겠습니다.

Formik 검증

Formik은 복잡한 유효성 검사가 포함된 양식을 쉽게 관리하도록 설계되었습니다. Formik은 동기식 및 비동기식 양식 수준 및 필드 수준 유효성 검사를 지원합니다. 또한 Yup을 통해 스키마 기반 양식 수준 유효성 검사를 기본적으로 지원합니다. 이 안내서는 위의 모든 항목에 대해 자세히 설명합니다.

유효성 검사 스키마

자신의 유효성 검사기를 작성하거나 타사 라이브러리를 사용하십시오. 여기서는 개체 스키마 유효성 검사에 Yup을 사용합니다. 브라우저용으로 충분히 작고 런타임 사용용으로 충분히 빠릅니다. Formik에는 Yup의 유효성 검사 오류를 키가 값과 일치하고 터치된 예쁜 개체로 자동 변환하는 validationSchema라는 Yup 개체 스키마에 대한 특수 구성 옵션/소품이 있습니다. 이러한 대칭을 통해 오류 메시지에 대한 비즈니스 논리를 쉽게 관리할 수 있습니다.

Yup을 프로젝트에 추가하려면 NPM에서 설치하십시오.

 npm install yup --save

import React from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';

const SignupSchema = Yup.object().shape({
  firstName: Yup.string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required('Required'),
  lastName: Yup.string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required('Required'),
  email: Yup.string().email('Invalid email').required('Required'),
});

const initialValues={{
        firstName: '',
        lastName: '',
        email: '',
      }}
export const ValidationSchemaExample = () => (
  <div>
    <h1>Signup</h1>
    <Formik
      initialValues={initialValues}
      validationSchema={SignupSchema}
      onSubmit={values => {
        console.log(values);
      }}
    >
      {({ errors, touched }) => (
        <Form>
          <Field name="firstName" />
          {errors.firstName && touched.firstName ? (
            <div>{errors.firstName}</div>
          ) : null}
          <Field name="lastName" />
          {errors.lastName && touched.lastName ? (
            <div>{errors.lastName}</div>
          ) : null}
          <Field name="email" type="email" />
          {errors.email && touched.email ? 
           <div>{errors.email} </div> : null
          }
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  </div>
);

//The ErrorMessage component can also be used to display error messages.
//<ErrorMessage name="email">
//  {msg => <div>{msg}</div>}
//</ErrorMessage>

요약

React에서 양식을 만드는 사람들에게 Formik은 React의 매우 유용한 라이브러리로 상태 관리, 양식 제출, 유효성 검사 및 오류 메시지 처리를 더 간단하게 수행하는 데 도움이 됩니다. 또한 유연하고 Redux Form보다 대기 시간이 짧습니다.

대부분의 설명서 부분은 Formik docs에서 가져왔습니다.