unregister

</> unregister: UseFormUnregister

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

Props(속성)

---

다음 예시는 unregister 메서드를 호출했을 때의 결과를 보여 줍니다.

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

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

옵션

---

이름	타입	설명
keepDirty	boolean	이 작업 중 isDirty와 dirtyFields를 유지합니다. 하지만 isDirty가 다음 사용자 입력으로 업데이트되지 않는다는 보장은 없습니다. isDirty는 defaultValues를 기준으로 측정됩니다.
keepTouched	boolean	등록을 해제한 후에도 touchedFields에서 해당 입력을 제거하지 않습니다.
keepIsValid	boolean	이 작업 중 isValid를 유지합니다. 하지만 다음 사용자 입력으로 스키마 검증의 isValid가 업데이트되지 않는다는 보장은 없으므로 등록 해제에 맞게 스키마를 조정해야 합니다.
keepError	boolean	errors를 업데이트하지 않습니다.
keepValue	boolean	입력의 현재 value를 업데이트하지 않습니다.
keepDefaultValue	boolean	입력의 defaultValue를 유지합니다. 이 값은 useForm에서 정의합니다. 참고: 폼의 최상위 shouldUnregister 옵션이 false(기본값)일 때만 적용되며 shouldUnregister: true이면 아무 작업도 하지 않습니다.
keepIsValidating	boolean	v7.51.0부터 등록 해제된 필드의 validatingFields/isValidating 상태를 지우지 않고 유지합니다.

규칙

• 이 메서드는 입력 참조와 값을 제거하므로 내장 검증 규칙도 함께 제거됩니다.

• 입력을 unregister해도 스키마 검증에는 영향을 주지 않습니다.

  const schema = yup
    .object()
    .shape({
      firstName: yup.string().required(),
    })
    .required()
  
  unregister("firstName") // this will not remove the validation against firstName input

• register 콜백을 가진 입력은 반드시 마운트 해제하세요. 그렇지 않으면 입력이 다시 등록됩니다.

  const [show, setShow] = useState(true)
  
  const onClick = () => {
    unregister("test")
    setShow(false) // make sure to unmount that input so register not invoked again.
  }
  
  {
    show && <input {...register("test")} />
  }

예시:

---

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

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

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

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

export default function App() {
  const { register, handleSubmit, unregister } = useForm()

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

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

동영상

---