React + MUI v5의 입력 형식에 사용되는 프로그램 라이브러리는 React Hook Form의 선택입니다

이번에 React(Type script) + MUI(v5)의 표 라이브러리를 조사했습니다.

입력 창 라이브러리

React의 입력 형식에 사용할 프로그램 라이브러리는 무엇입니까?
2022년 03월 22일까지 주요 물건은 대략 다음과 같은 3시입니다.

Formik

React Final Form

React Hook Form

React Hook Form의 경과를 결정합니다.

우선 npm trends로 비교해 봅시다.
인기 순위는 포엠>리액트 훅 포엠>리액트 파이널 포엠.

1. Formik

npm trends가 가장 인기 있는 프로그램 라이브러리임을 확인했습니다.
그러나 다른 두 프로그램 라이브러리에 비해 렌더링 효과가 많고 성능이 떨어진다.
나는 지금 선택할 필요가 없다고 생각해서 통과했다.
성능 비교

2. React Final Form

이것은 세 가지 중 가장 가벼운 프로그램 라이브러리다.
렌더링이 억제되고 퍼포먼스도 좋지만 별로 인기가 없는 것 같아요.
홈페이지는 친절하다고 하지만 샘플도 적다.
https://final-form.org/react

3. React Hook Form

과장이 억제되어 공연이 좋다.
포믹에 이어 인기가 많고 일본어 기사도 인기다.
홈페이지에는 설명문이 적지만 샘플 코드가 많다.
https://react-hook-form.com/jp/

비교 코드를 써봤어요.

UI 프레임워크는 MUI v5를 사용하기로 결정합니다.
그래서 우리는 MUI v5를 사용한 코드를 React Final Form과 React Hook Form으로 각각 비교했다.

MUIv5 및 ReactuseState 설치 사용

우선 리액트 파인포름과 리액트 훅포름을 사용하지 않고 설치를 시도해 본다.
모더니즘.
InputForm.tsx

import React from 'react'
import { Stack, TextField, Button } from '@mui/material'

export function InputForm() {
  const [name, setName] = React.useState('')
  const [hasNameError, setHasNameError] = React.useState(false)

  const inputName = React.useCallback(
    (event) => {
      const inputValue = event.target.value
      const isEmpty = inputValue === ''
      setName(inputValue)
      setHasNameError(isEmpty)
    },
    [setName, setHasNameError]
  )

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const isEmptyName = name === ''

    if (isEmptyName) {
      setHasNameError(true)
    }
    console.log(`Sybmit Name: ${name}`)
  }

  return (
    <Stack component="form" noValidate onSubmit={handleSubmit} spacing={2} sx={{ m: 2, width: '25ch' }}>
      <TextField
        type="text"
        label="名前"
        required
        value={name}
        error={hasNameError}
        onChange={inputName}
        helperText={hasNameError ? '名前を入力してください。' : ''}
      />
      <Button variant="contained" type="submit">
        送信する
      </Button>
    </Stack>
  )
}

MUIv5 및 React Final Form을 사용한 설치

그런 다음 MUIv5 및 React Final Form을 사용하여 설치합니다.
React Final Form 설치
3

npm install final-form react-final-form

샘플 코드.
홈페이지의 샘플 코드만 보고 어떻게 쓰는지 몰라요.
검색할 때도 정보가 잘 안 나와서 검색하는 데 시간이 많이 걸렸어요.
react-final-form의 Field 구성 요소의render에서 @mui/material의 TextField를 지정하는 것과 같은 쓰기 방법입니다.
이것은 나 개인의 소감이지만, 나는 그다지 직관적으로 쓰지 못했다고 생각한다.
InputReactFinalForm.tsx

import { Form, Field } from 'react-final-form'
import { Stack, TextField, Button } from '@mui/material'

type Values = {
  name: string
}

export function InputReactFinalForm() {
  const onSubmit = (values: Values) => {
    console.log(`onSubmit:${values.name}`)
  }

  const validateName = (value: string) => {
    if (!value) {
      return '名前を入力してください。'
    }
    return undefined
  }

  return (
    <Form
      onSubmit={onSubmit}
      initialValues={{ name: 'longbridgeyuk' }}
      render={({ handleSubmit }) => (
        <Stack component="form" noValidate onSubmit={handleSubmit} spacing={2} sx={{ m: 2, width: '25ch' }}>
          <Field
            name="name"
            validate={validateName}
            render={({ input, meta }) => (
              <TextField
                {...input}
                placeholder="名前"
                label="名前"
                helperText={meta.error}
                error={meta.touched && !!meta.error}
              />
            )}
          />

          <Button variant="contained" type="submit">
            送信する
          </Button>
        </Stack>
      )}
    />
  )
}

MUIv5 및 React Hook Form 설치 사용

그런 다음 MUIv5 및 React Hook Form을 사용하여 설치합니다.
React Hook Form 설치
3

npm install react-hook-form

샘플 코드.
이것은 홈페이지의 샘플 코드만 있으면 쉽게 실현할 수 있다.
개인의 소감으로서 코드도 간단하고 이해하기 쉽다.
하지만 MUI의 Text Field라면 React Hook Form이 딱 맞지만 다른 구성 요소라면 쉽지 않을 거예요.
2022/03/25 샘플 코드를 고쳤습니다.
React Hook Forms에서 MUI 구성 요소를 간단하게 처리하기 위해 준비한 스피커 구성 요소 Controller 구성 요소는 를 사용하여 작성된 것 같습니다.

import { Stack, TextField, Button } from '@mui/material'
import { useForm, SubmitHandler, Controller } from 'react-hook-form'

type Inputs = {
  name: string
}

export function InputReactHookFormTextField() {
  const {
    control,
    handleSubmit,
    formState: { errors }
  } = useForm<Inputs>({
    defaultValues: { name: 'longbridgeyuk' }
  })

  const validationRules = {
    name: {
      required: '名前を入力してください。',
      minLength: { value: 4, message: '4文字以上で入力してください。' }
    }
  }

  const onSubmit: SubmitHandler<Inputs> = (data: Inputs) => {
    console.log(`submit: ${data.name}`)
  }

  return (
    <Stack component="form" noValidate 
    onSubmit={handleSubmit(onSubmit)} 
    spacing={2} sx={{ m: 2, width: '25ch' }}>

      <Controller
        name="name"
        control={control}
        rules={validationRules.name}
        render={({ field }) => (
          <TextField
            {...field}
            type="text"
            label="名前"
            error={errors.name !== undefined}
            helperText={errors.name?.message}
          />
        )}
      />
      <Button variant="contained" type="submit">
        送信する
      </Button>
    </Stack>
  )
}

총결산

React Hook Form 홈 페이지에는 샘플 코드가 많기 때문에 가져오기가 쉽다고 생각했습니다.
또 인기가 많아서 기사의 양도 많아서 어떤 어려움이 있어도 검색만 하면 쉽게 해결할 수 있다.
코드도 간단해서 이해하기 쉽다고 생각해요.
React(Type script) + MUI(v5)라면 React Hook Form의 선택이라고 생각합니다.