</> `unregister:` (name: string | string[], options) => void

이 메서드는 단일 입력 또는 입력 배열을 unregister할 수 있게 해줍니다. 또한 두 번째 선택적 인자를 통해 입력을 등록 해제한 후에도 상태를 유지할 수 있습니다.

Props

아래 예제는 unregister 메서드를 호출할 때 어떤 결과를 얻을 수 있는지 보여줍니다.

<input {...register('yourDetails.firstName')} />
<input {...register('yourDetails.lastName')} />

타입	입력 이름	값
string	`unregister("yourDetails")`	`{}`
string	`unregister("yourDetails.firstName")`	`{ lastName: '' }`
string[]	`unregister(["yourDetails.lastName"])`	`''`

옵션

이름	타입	설명
`keepDirty`	boolean	`isDirty`와 `dirtyFields`가 이 작업 중에 유지됩니다. 그러나 이는 다음 사용자 입력이 `isDirty` 폼 상태를 업데이트하지 않을 것을 보장하지 않습니다. 왜냐하면 `isDirty`는 `defaultValues`와 비교하여 측정되기 때문입니다.
`keepTouched`	boolean	`touchedFields`는 unregister 후에도 해당 입력을 제거하지 않습니다.
`keepIsValid`	boolean	`isValid`가 이 작업 중에 유지됩니다. 그러나 이는 다음 사용자 입력이 스키마 유효성 검사를 위해 `isValid`를 업데이트하지 않을 것을 보장하지 않습니다. 스키마를 unregister에 맞게 조정해야 합니다.
`keepError`	boolean	`errors`가 업데이트되지 않습니다.
`keepValue`	boolean	입력의 현재 `value`가 업데이트되지 않습니다.
`keepDefaultValue`	boolean	`useForm`에서 정의된 입력의 `defaultValue`가 유지됩니다.

규칙

이 메서드는 입력 참조와 그 값을 제거합니다. 이는 내장된 유효성 검사 규칙도 제거됨을 의미합니다.

입력을 unregister해도 스키마 유효성 검사에는 영향을 미치지 않습니다.

const schema = yup
  .object()
  .shape({
    firstName: yup.string().required(),
  })
  .required()

unregister("firstName") // 이는 firstName 입력에 대한 유효성 검사를 제거하지 않습니다.

register 콜백이 있는 입력을 마운트 해제해야 합니다. 그렇지 않으면 입력이 다시 등록됩니다.

const [show, setShow] = React.useState(true)

const onClick = () => {
  unregister("test")
  setShow(false) // 입력을 마운트 해제하여 register가 다시 호출되지 않도록 합니다.
}

{
  show && <input {...register("test")} />
}

예제:

CodeSandbox ^TS

import React, { useEffect } from "react"
import { useForm } from "react-hook-form"

interface IFormInputs {
  firstName: string
  lastName?: string
}

export default function App() {
  const { register, handleSubmit, unregister } = useForm<IFormInputs>()
  const onSubmit = (data: IFormInputs) => console.log(data)

  React.useEffect(() => {
    register("lastName")
  }, [register])

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <button type="button" onClick={() => unregister("lastName")}>
        unregister
      </button>
      <input type="submit" />
    </form>
  )
}

비디오

여러분의 지원에 감사드립니다

React Hook Form이 프로젝트에서 유용하다면, GitHub에서 스타를 눌러 지원해 주세요.

unregister

</> unregister: (name: string | string[], options) => void

Props

옵션

비디오

여러분의 지원에 감사드립니다

</> `unregister:` (name: string | string[], options) => void