setValue

</> setValue: UseFormSetValue

이 함수를 사용하면 등록된 필드의 값을 동적으로 설정하고 폼 상태를 검증하고 업데이트하는 옵션을 지정할 수 있습니다. 동시에 불필요한 리렌더링을 피합니다.

Props

---

이름		설명
name string		이름으로 단일 필드 또는 필드 배열을 지정합니다.
value unknown		필드에 설정할 값입니다. 이 인수는 필수이며 undefined일 수 없습니다.
options	shouldValidate boolean	입력이 유효한지 계산할지 여부입니다(errors 구독). 전체 폼이 유효한지 계산할지 여부입니다(isValid 구독). 이 옵션은 전체 폼의 errors가 아니라 지정한 필드의 유효성만 다시 계산합니다.
	shouldDirty boolean	defaultValues를 기준으로 입력이 dirty 상태인지 계산할지 여부입니다(dirtyFields 구독). defaultValues를 기준으로 전체 폼이 dirty 상태인지 계산할지 여부입니다(isDirty 구독). 이 옵션은 전체 폼의 dirty 필드가 아니라 지정한 필드 수준에서 dirtyFields를 업데이트합니다.
	shouldTouch boolean	v7.8.0부터 입력 자체를 touched 상태로 설정할지 여부입니다.
	delayError boolean	v7.82.0부터 useForm({ delayError })에서 구성한 지연 시간(밀리초)을 사용하여 발생한 검증 오류 표시를 늦추는 선택적 플래그입니다. shouldValidate도 true로 설정한 경우에만 적용됩니다.

규칙

• shouldDirty는 대상 필드가 즉시 dirtyFields에 표시되는 것만 보장합니다. isDirty는 항상 현재 값을 defaultValues와 비교하므로 나중에 어떤 필드든 업데이트되면 dirtyFields가 다시 계산되어 값이 이미 기본값과 다른 다른 필드도 표시될 수 있습니다. 여기에는 마지막에 shouldDirty: false로 기록한 필드도 포함됩니다.

• 필드 배열에는 replace 또는 update 같은 메서드를 사용할 수 있습니다. 다만 대상 필드 배열의 컴포넌트가 언마운트된 후 다시 마운트됩니다.

  const { update } = useFieldArray({ name: "array" })
  
  // unmount fields and remount with updated value
  update(0, { test: "1", test1: "2" })
  
  // will directly update input value
  setValue("array.0.test1", "1")
  setValue("array.0.test2", "2")

• 두 번째 인수를 중첩 객체로 지정하기보다 필드 이름을 직접 지정하는 것이 좋습니다.

  setValue("yourDetails.firstName", "value") // ✅ performant
  setValue("yourDetails", { firstName: "value" }) ❌ // less performant
  
  register("nestedValue", { value: { test: "data" } }) // register a nested value input
  setValue("nestedValue.test", "updatedData") // ❌ failed to find the relevant field
  setValue("nestedValue", { test: "updatedData" }) // ✅ setValue finds the input and updates it

• setValue를 호출하기 전에 입력 이름을 등록하는 것이 좋습니다. 전체 FieldArray를 업데이트하려면 먼저 useFieldArray 훅이 실행되었는지 확인합니다.

  중요: 전체 필드 배열을 업데이트할 때는 replace를 우선 사용하며 useFieldArray에서 제공합니다. 더 명확하고 용도에 맞게 설계된 API이며, 이러한 setValue 사용법은 향후 버전에서 권장되지 않을 수 있습니다.

  // you can update an entire Field Array,
  setValue("fieldArray", [{ test: "1" }, { test: "2" }]) // ⚠️ works, but prefer replace() from useFieldArray
  
  // you can use `setValue` on an unregistered input
  setValue("notRegisteredInput", "value") // ✅ prefer it to be registered
  
  // the following will implicitly register a single input (without register being invoked)
  setValue("resultSingleNestedField", { test: "1", test2: "2" }) // ⚠️ works, but registers a field you never called register() on — prefer registering it explicitly
  
  // With registered inputs, `setValue` will update both inputs correctly.
  register("notRegisteredInput.test")
  register("notRegisteredInput.test2")
  setValue("notRegisteredInput", { test: "1", test2: "2" }) // ✅ sugar syntax to setValue twice

예제

---

기본

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

const App = () => {
  const { register, setValue } = useForm({
    firstName: "",
  })

  return (
    <form>
      <input {...register("firstName", { required: true })} />
      <button onClick={() => setValue("firstName", "Bill")}>setValue</button>
      <button
        onClick={() =>
          setValue("firstName", "Luo", {
            shouldValidate: true,
            shouldDirty: true,
          })
        }
      >
        setValue options
      </button>
    </form>
  )
}

오류 지연

// the actual delay (in ms) is configured once at the form level
const { setValue } = useForm({ delayError: 500 })

setValue("firstName", "Bill", {
  delayError: true, // opt in to the 500ms delay configured above
  shouldValidate: true,
})

종속 필드

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

type FormValues = {
  a: string
  b: string
  c: string
}

export default function App() {
  const { watch, register, handleSubmit, setValue, formState } =
    useForm<FormValues>({
      defaultValues: {
        a: "",
        b: "",
        c: "",
      },
    })
  const onSubmit = (data: FormValues) => console.log(data)
  const [a, b] = watch(["a", "b"])

  useEffect(() => {
    if (formState.touchedFields.a && formState.touchedFields.b && a && b) {
      setValue("c", `${a} ${b}`)
    }
  }, [setValue, a, b, formState])

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("a")} placeholder="a" />
      <input {...register("b")} placeholder="b" />
      <input {...register("c")} placeholder="c" />
      <input type="submit" />

      <button
        type="button"
        onClick={() => {
          setValue("a", "what", { shouldTouch: true })
          setValue("b", "ever", { shouldTouch: true })
        }}
      >
        trigger value
      </button>
    </form>
  )
}

동영상

---