본문으로 건너뛰기

watch

</> watch: UseFormWatch​

이 메서드는 지정한 입력을 감시하고 값을 반환합니다. 입력값을 렌더링하거나 조건에 따라 무엇을 렌더링할지 결정할 때 유용합니다.

오버로드​

이 함수에는 네 가지 오버로드가 있습니다.

  • watch(name: string, defaultValue?: unknown): unknown
  • watch(names: string[], defaultValue?: {[key:string]: unknown}): unknown[]
  • watch(): {[key:string]: unknown}
  • watch(callback, defaultValues?): { unsubscribe: () => void } (지원 중단 예정, 아래 참고)

네 가지 오버로드는 아래에서 각각 설명합니다.

1-a. 단일 필드 감시 watch(name: string, defaultValue?: unknown): unknown​

컴포넌트 안에서 watch를 호출해 필드 값을 구독하고 값이 변경될 때 리렌더링합니다.

매개변수

이름타입설명
namestring필드 이름
defaultValueunknown선택 사항. 필드의 기본값

반환값 단일 필드 값입니다.

const name = watch("name")

1-b. 여러 필드 감시 watch(names: string[], defaultValue?: {[key:string]: unknown}): unknown[]​

컴포넌트 안에서 watch를 호출해 필드 배열을 구독하고 그중 하나라도 변경될 때 리렌더링합니다.

매개변수

이름타입설명
namesstring[]필드 이름
defaultValue{[key:string]: unknown}선택 사항. 필드의 기본값

반환값 필드 값 배열입니다.

const [name, name1] = watch(["name", "name1"])

1-c. 전체 폼 감시 watch(): {[key:string]: unknown}​

onChange를 기준으로 전체 폼의 변경을 감시하고 구독하며 useForm 수준에서 리렌더링을 실행합니다.

매개변수 없음

반환값 전체 폼 값입니다.

const formValues = watch()

2. 지원 중단 예정: subscribe를 사용하거나 마이그레이션하세요. 콜백 함수로 감시하기 watch(callback: (data, { name, type }) => void, defaultValues?: {[key:string]: unknown}): { unsubscribe: () => void } v7.0.0부터​

리렌더링을 실행하지 않고 필드 업데이트나 변경을 구독합니다.

매개변수

이름타입설명
callback(data, { name, type }) => void모든 필드 변경을 구독하는 콜백 함수
defaultValues{[key:string]: unknown}선택 사항. 전체 폼의 defaultValues

반환값 unsubscribe 함수를 포함한 객체입니다.

콜백 인수

type 인수는 변경을 발생시킨 DOM 이벤트를 나타내며 EventType으로 지정됩니다. 표준 웹 입력에서는 사용자가 필드를 업데이트할 때 'change'입니다. 변경이 프로그래밍 방식으로 발생하면 type은 undefined입니다(예: setValue, reset 또는 unregister 후). React Native 이벤트 타입을 포함한 전체 유니온은 EventType을 참고하세요.

규칙​

  • defaultValue를 정의하지 않으면 watch의 첫 렌더링에서 undefined를 반환합니다. register보다 먼저 호출되기 때문입니다. 이 동작을 피하려면 defaultValues를 useForm에 제공하는 것이 권장되지만 두 번째 인수로 인라인 defaultValue를 설정할 수도 있습니다.
  • defaultValue와 defaultValues를 모두 제공하면 defaultValues의 값이 우선합니다. 인라인 defaultValue는 해당 필드에 값이 전혀 없을 때만 대체 값으로 사용됩니다.
  • 이 API는 애플리케이션이나 폼의 루트에서 리렌더링을 실행합니다. 성능 문제가 발생하면 콜백 또는 useWatch API 사용을 고려하세요.
  • watch 결과는 useEffect 의존성이 아니라 렌더링 단계에 맞게 최적화되어 있습니다. 값 업데이트를 감지하려면 값 비교를 위한 외부 커스텀 훅을 사용할 수 있습니다.

예시:​

폼에서 감시하기​

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

interface IFormInputs {
  name: string
  showAge: boolean
  age: number
}

function App() {
  const {
    register,
    watch,
    formState: { errors },
    handleSubmit,
  } = useForm<IFormInputs>()
  const watchShowAge = watch("showAge", false) // you can supply default value as second argument
  const watchAllFields = watch() // when you pass nothing as an argument, you are watching everything
  const watchFields = watch(["showAge", "age"]) // you can also target specific fields by their names

  const onSubmit = (data: IFormInputs) => console.log(data)

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register("name", { required: true, maxLength: 50 })} />
        <input type="checkbox" {...register("showAge")} />
        {/* based on yes selection to display Age Input*/}
        {watchShowAge && (
          <input type="number" {...register("age", { min: 50 })} />
        )}
        <input type="submit" />
      </form>
    </>
  )
}

필드 배열에서 감시하기​

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

type FormValues = {
  test: {
    firstName: string
    lastName: string
  }[]
}

function App() {
  const { register, control, handleSubmit, watch } = useForm<FormValues>()
  const { fields, remove, append } = useFieldArray({
    name: "test",
    control,
  })
  const onSubmit = (data: FormValues) => console.log(data)

  console.log(watch("test"))

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {fields.map((field, index) => {
        return (
          <div key={field.id}>
            <input
              defaultValue={field.firstName}
              {...register(`test.${index}.firstName`)}
            />
            <input
              defaultValue={field.lastName}
              {...register(`test.${index}.lastName`)}
            />
            <button type="button" onClick={() => remove(index)}>
              Remove
            </button>
          </div>
        )
      })}
      <button
        type="button"
        onClick={() =>
          append({
            firstName: "bill",
            lastName: "luo",
          })
        }
      >
        Append
      </button>
    </form>
  )
}

동영상​