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

이 메서드를 사용하면 단일 입력 또는 입력 배열을 등록 해제(unregister) 할 수 있습니다. 또한 입력을 등록 해제(unregister)한 후 상태를 유지하기 위한 두 번째 선택적 인수를 제공합니다.

Props

아래 예시는 unregister 메서드를 호출할 때 예상되는 상황을 보여줍니다.

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

Type	Input Name	Value
string	`unregister("yourDetails")`	`{}`
string	`unregister("yourDetails.firstName")`	`{ lastName: '' }`
string[]	`unregister(["yourDetails.lastName"])`	`''`

Options

Name	Type	Description
`keepDirty`	boolean	이 작업을 수행하는 동안 `isDirty`와 `dirtyFields`는 유지됩니다. 그러나 `isDirty`는 `defaultValues`에 대해 측정되기 때문에 다음 사용자 입력이 `isDirty` formState를 업데이트하지 않는다고 보장하지는 않습니다.
`keepTouched`	boolean	`touchedFields`는 등록을 해제(unregister)한 후 더 이상 해당 입력을 제거하지 않습니다.
`keepIsValid`	boolean	이 작업 중에는 `isValid`가 유지됩니다. 그러나 다음 사용자 입력이 스키마 유효성 검사를 위해 `isValid`를 업데이트하지 않는다고 보장하지는 않으므로 등록 해제(unregister)에 따라 스키마를 조정해야 합니다.
`keepError`	boolean	`errors`가 업데이트되지 않습니다.
`keepValue`	boolean	입력의 현재 `value`는 업데이트되지 않습니다.
`keepDefaultValue`	boolean	`useForm`에 정의된 입력의 `defaultValue`는 그대로 유지됩니다.

RULES

이 방법을 사용하면 입력의 참조와 해당 값이 제거되므로 내장 유효성 검사 규칙도 제거됩니다.

입력을 등록 해제(unregister)하면 스키마 유효성 검사에 영향을 미치지 않습니다.

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

unregister("firstName") //  이 경우 firstName input에 대한 유효성 검사는 제거되지 않습니다.

register 콜백이 있는 입력은 반드시 unmount해야 하며, 그렇지 않으면 입력이 다시 등록(register)됩니다.

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

const onClick = () => {
  unregister("test")
  setShow(false) // register가 다시 호출되지 않도록 해당 입력을 unmount해야 합니다.
}

{
  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>
  )
}

Video

지원해 주셔서 감사합니다

프로젝트에서 React Hook Form이 유용하다고 생각하신다면, 스타를 눌러 지원해 주시길 부탁드립니다.

unregister

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

Props

Options

Video

지원해 주셔서 감사합니다

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