구성 요소에 React Hook Form 보안 적용

UseForm Register Return 사용

InputPropos에는 Input 태그가 사용할 수 있는 모든 속성의 유형이 포함되어 있다고 생각하십시오.
TextField.tsx

import { UseFormRegisterReturn } from 'react-hook-form'

type Props = InputProps & {
  register?: UseFormRegisterReturn
  error?: string
}

export function TextField(props: Props) {
  const { error, register, ...rest } = props

  return (
      <input {...register} {...rest} />
      <ErrorMessage>{error}</ErrorMessage>
  )
}

Form.tsx

<TextField
  register={register('name', { required: '必須です', })}
  error={error}
>

왠지 모르게 레지스터가 그렇게 귀속을 하려고 했는데 이 타입UseFormRegisterReturn은 의외로 나오지 않았다.
아니면register...펼치지 않고 그대로 묶어두면 유형 정의가 UseFormRegister<TFieldValues>로 바뀌어 제닉스가 필요한데 그건 좀 어렵기 때문에 펼쳐서 건네주는 게 좋을 것 같아요.