'ReactHookForm'그룹 schema로 Form 만들기

조합ReactHookForm과yup의schema로 표를 만드는 방법.yup라고 썼지만 zod도 같은 일을 할 수 있을 거예요.
샘플 코드 여기 있습니다.
https://github.com/iteduki/ ReactHookForm -book-example
이 글의 전제는 ReactHookForm의 기본적인 용법을 아는 것이다.

ReactHookForm과 Yup의 조합입니다.

ReactHookForm에서 사용resolvers은 모델을 바탕으로 검증할 수 있다
https://www.npmjs.com/package/@hookform/resolvers
사용 방법은 npm 창고의 QuickStart와 같이 useForm의 옵션만 제공resolver: yupResolver(schema).

const { register, handleSubmit } = useForm({
  resolver: yupResolver(schema),
});

분할schema

Yup.object() 자체적으로 펼칠 수 없지만 대상의 필드를 yup에 정의된 모드로 설정하면 각 모드를 펼쳐서 하나의 모드를 만들 수 있습니다.
구체적인 코드는 다음과 같다.

const userNameSchema = {
  name: Yup.string().required('名前を入力してください')
}
const userEmailSchema = {
  email: Yup.string().required('メールアドレスを入力してください')
}

const schema = Yup.object({
  ...userNameSchema,
  ...userEmailSchema
})

이렇게 분할 모드를 통해 모드를 가진 각 구성 요소를 조합하여 표를 만들 수 있다.
예를 들어 어떤 형식에서 이름만 있으면 schema는 위userNameSchema만 포함하면 된다.

schema로 틀을 만들다

yup 정의된 패턴에 따라 몰드 제작 가능

const userNameSchema = {
  name: Yup.string().required('名前を入力してください')
}
const yupObject = Yup.object(userNameSchema)
type UserNameFormValues = Yup.InferType<typeof yupObject>
// => type UserNameFormValues = { name: string }

string 이외에 number,boolean,array,required 등도 표시할 수 있다.
안 하면string | undefined여기서 생성할 수 있는 유형과ReactHookForm를 조합하여 검증형 폼을 만든다.

형식적으로 만들기name

ReactHookForm에서 제공한 Path 형식의 수신 형식 형식과 유효한 필드 이름의 상수 형식을 되돌려줍니다.

import type { Path } from 'react-hook-form'

type NameType = Path<{ firstName: string; lastName: string; }>
// => type NameType = 'firstName' | 'lastName'

type UserNameType = Path<{ users: { firstName: string; lastName: string }[] }>
// => type UserNameType = "users" | `users.${number}` | `users.${number}.firstName` | `users.${number}.lastName`

는 수조와 대상을formname의 유형으로 설정할 수 있다.
이것을 이용하여 inputname 속성을 검증할 수 있는 구성 요소를 만듭니다.

TextInput

코드를 먼저 업로드합니다.

import type { InputHTMLAttributes } from 'react'
import type { FieldValues, Path } from 'react-hook-form'
import { useFormContext } from 'react-hook-form'

export interface TextInputProps<T> extends Omit<InputHTMLAttributes<HTMLInputElement>, 'name'> {
  name: Path<T>
}
export const TextInput = <T extends FieldValues = never>({
  name,
  ...props
}: TextInputProps<T>): ReturnType<React.VFC> => {
  const { register } = useFormContext()

  return <input type="text" {...register(name)} {...props} />
}

방금 Path<T>에서 제작한 nameTextInput 구성 요소만 받습니다.Path와 함께 importFieldValues은 useForm의 유형 매개 변수와 같은 유형이고 실체는Record<string, any>이다.기본값은 never입니다. 유형을 지정하지 않으면 오류가 발생합니다.

const userNameSchema = {
  firstName: Yup.string().required('名前を入力してください')
  lastName: Yup.string().required('姓を入力してください')
}
const yupObject = Yup.object(userNameSchema)
type UserNameFormValues = Yup.InferType<typeof yupObject>

export const UserName: React.VFC = () => {
  return (
    <>
      <TextInput<UserNameFormValues> name="lastName">
      <TextInput<UserNameFormValues> name="firstName">
    </>
  )
}

와 방금name의 패턴을 조합하면 이런 느낌이 든다.
지정되지 않은 유형에 포함된 name를 입력하면 오류가 발생하여 name의 입력을 방지할 수 있습니다.
이렇게 하면 조합yup의 모델과 이로 인해 발생하는 유형과ReactHookForm가 제공하는 유형을 통해 형식적인 형식 개발을 할 수 있다.
모드는 모든 구성 요소가 닫혀 있기 때문에 구성 요소 단위로 조합하거나 테스트할 수 있습니다.