Formik의 기본 사용법과 MaterialUI에서의 사용 예

이전의 이슈에서 사용한 Formik의 메모입니다.
공식 문서가 역시 제일 상세하지만,
처음 사용하는 사람은 간단한 개요가있는 것이 좋을지도 모르기 때문에 기사로 둡니다.

Formik이란?

Formik은 React의 양식 처리를 단순화하는 라이브러리입니다.

Formik 공식 문서
아마도 세계에서 가장 많이 사용되는 React의 폼 라이브러리가 아닐까 생각합니다.
npm trends에서 다른 라이브러리와 비교해 보았습니다.



react-hook-form도 늘어나고 있습니다만, 다른 라이브러리와 꽤 차이가 열리고 있군요.

Formik은 이하 3점을 받아 줍니다.

양식 상태 관리

유효성 검사

양식 제출 처리

양식 상태 관리에는 Redux-Form이라는 라이브러리도 있지만,
Formik이 더 간단합니다.
Redux를 사용하면 복잡해지기 쉽기 때문에,
Formik 쪽이 좋은 케이스가 많지 않을까 생각합니다.

밸리데이션에 대해서는, Yup라고 하는 라이브러리와 세트로 사용하는 것이 많습니다. 공식에서도 Yup 좋지 않은 것 말하고 있네요.

Formik 사용법 개요

우선 설치합시다.

npm install formik --save
// または
yarn add formik

사용법은 크게 나누어 3 종류 있습니다.

useFormik을 사용하여 작성하는 방법

withForimik 사용법

JSX의 return 부분에서 <Formik> 컴퍼넌트를 사용해 쓰는 법

Formik 구성 요소를 사용하여 작성하는 것이 간결합니다.
한편, materialUI등의 컴퍼넌트로 사용하는 경우에는 useFormik를 사용하는 방법이 있습니다.

이 기사에서는 useFormik을 사용한 기술 내용 중심으로,
다른 기사에서 Formik 컴퍼넌트를 사용한 방법을 써 갈까라고 생각합니다.

그건 그렇고, Formik 구성 요소는 useFormik을 내부적으로 사용합니다.

useFormik을 사용하는 방법

대체로 이하의 느낌이 될까 생각합니다.

useFormik 을 사용해, 인수나 형태로 폼의 정보를 설정.

양식에서 무엇을 취급하는지 형식으로 설정

초기값 설정

유효성 검사 설정

form onSubmit시 처리 설정

form 태그의 onSubmit 속성에 formik.handleSubmit 설정

각 양식 요소에 formik의 가치와 이벤트를 설정

코드로 써 보면 다음과 같은 느낌의 샘플에 울립니다.

import { useFormik } from 'formik';
import * as Yup from 'yup';

const SampleComponent = () => {

  const formik = useFormik<Type>({
    // フォームに初期値を設定
    initialValues: {
      email: '',
      password: '',
    },
    // バリデーション
    validationSchema: validationSchema,
    // submit時のファンクション
    onSubmit: values => {
      // valuesはformの現在の値を返す。
      alert(JSON.stringify(values, null, 2))
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="email">Email Address</label>
      <input
        // idとnameをinitialValuesで設定したプロパティと合わせて設定
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        onBlur={formik?.handleBlur}
        value={formik.values.email}
      >
      <label htmlFor="password">Password</label>
      {formik.errors.email ? <div>{formik.errors.email}</div> : null}

      <input
        id="password"
        name="password"
        type="password"
        onChange={formik.handleChange}
        onBlur={formik?.handleBlur}
        value={formik.values.password}
      >
      {formik.errors.password ? <div>{formik.errors.password}</div> : null}
      <button type="submit">Submit</button>
    </form>
  )
}

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

input의 설정 프로퍼티가 조금 많은 느낌이 드네요.
태그를 사용하는 방법이라면 더 간단하게 쓸 수 있습니다.

자주 사용하는 속성

그 밖에도 여러가지 있습니다만, 이하의 3개는 잘 사용했습니다.

// 特定のフォーム要素に値を設定。
formik.setFieldValue('email', '[email protected]')
// 複数のフォーム要素に値を設定。APIで取得した値を一括で設定したいときなどに利用
formik.setValues(values)
// フォームの値をリセット
formik.handleReset

MaterialUI에서 사용하는 방법

TextField와 RadioButton은 응용 프로그램에서 자주 사용되는 요소이므로,
컴포넌트 분할되어 사용해 주어지는 케이스가 많다고 생각합니다.
그런 경우 정도는 이런 느낌에 formik를 props로 전달해 주면 됩니다.

interface Props {
    name: string;
  formik?: ReturnType<typeof useFormik>;
}

const TextFieldParts: FC<Props> = ({name, formik}) => {
  return <TextField
    ~~
    value={formik?.values[name]}
    onChange={formik?.handleChange}
    onBlur={formik?.handleBlur}
    error={Boolean(formik?.errors[name])}
    helperText={formik?.errors[name]}
    ~~
  />
};