Skip to content
♥

watch

입력 변경 사항 구독

</> watch: some overloads

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

오버로드

이 함수는 주로 두 가지 목적을 위해 사용됩니다:

  1. 필드의 값을 반환하고 동기화를 유지합니다. a. watch(name: string, defaultValue?): unknown b. watch(names: string[], defaultValue?): {[key:string]: unknown} c. watch(): {[key:string]: unknown}
  2. 주어진 콜백 함수로 구독을 시작합니다 (unsubscribe 함수를 호출하여 중단 가능). a. watch(callback: (data, { name, type }) => void, defaultValues?): { unsubscribe: () => void }

이 네 가지 오버로드에 대한 설명은 아래에 이어집니다.

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

렌더링 외부에서 사용되는 단일 필드를 감시하고 구독합니다.

매개변수

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

반환값 단일 필드의 값.

const name = watch("name")

1-b. 특정 필드 감시하기 watch(names: string[], defaultValue?: {[key:string]: unknown}): unknown[]

렌더링 외부에서 사용되는 필드 배열을 감시하고 구독합니다.

매개변수

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

반환값 필드 값들의 배열을 반환합니다.

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

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

useForm에서 폼 전체의 업데이트나 변경을 감시하고 구독합니다. 이는 onChange 이벤트를 기반으로 작동하며, 폼이 변경될 때마다 리렌더링됩니다.

인자 없음

반환값 폼 전체의 값

const formValues = watch()

2. 콜백 함수로 감시 시작하기 watch(callback: (data, { name, type }) => void, defaultValues?: {[key:string]: unknown}): { unsubscribe: () => void }

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

매개변수

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

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

useEffect(() => {
  const { unsubscribe } = watch((value) => {
    console.log(value)
  })
  return () => unsubscribe()
}, [watch])

규칙

  • defaultValue가 정의되지 않았을 때, watch의 첫 번째 렌더링은 register가 호출되기 전에 실행되므로 undefined를 반환합니다. 이 동작을 피하기 위해 useForm에서 defaultValues를 제공하는 것이 권장되지만, 두 번째 인자로 인라인 defaultValue를 설정할 수도 있습니다.
  • defaultValue와 defaultValues가 모두 제공되면, defaultValue가 반환됩니다.
  • 이 API는 앱이나 폼의 루트에서 리렌더링을 트리거합니다. 성능 문제가 발생한다면 콜백이나 useWatch API를 사용하는 것을 고려해 보세요.
  • watch의 결과는 useEffect의 의존성 배열보다는 렌더링 단계에 최적화되어 있습니다. 값 업데이트를 감지하려면 외부 커스텀 훅을 사용하여 값을 비교하는 것이 좋습니다.

예제:

폼에서 값 관찰하기

CodeSandbox TS
import React from "react"
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) // 두 번째 인자로 기본값을 제공할 수 있음
  const watchAllFields = watch() // 인자 없이 호출하면 모든 필드를 관찰
  const watchFields = watch(["showAge", "age"]) // 특정 필드 이름을 배열로 전달하여 관찰 가능


  // 콜백 방식의 watch 사용. 완료 후 구독 해제는 여러분의 책임입니다.
  React.useEffect(() => {
    const subscription = watch((value, { name, type }) =>
      console.log(value, name, type)
    )
    return () => subscription.unsubscribe()
  }, [watch])


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


  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register("name", { required: true, maxLength: 50 })} />
        <input type="checkbox" {...register("showAge")} />
        {/* showAge가 true일 때만 나이 입력 필드 표시 */}
        {watchShowAge && (
          <input type="number" {...register("age", { min: 50 })} />
        )}
        <input type="submit" />
      </form>
    </>
  )
}
CodeSandbox JS
import React from "react"
import { useForm } from "react-hook-form"


function App() {
  const {
    register,
    watch,
    formState: { errors },
    handleSubmit,
  } = useForm()
  const watchShowAge = watch("showAge", false) // 두 번째 인자로 기본값을 제공할 수 있음
  const watchAllFields = watch() // 인자 없이 호출하면 모든 필드를 관찰
  const watchFields = watch(["showAge", "number"]) // 특정 필드 이름을 배열로 전달하여 관찰 가능


  // 콜백 방식의 watch 사용. 완료 후 구독 해제는 여러분의 책임입니다.
  React.useEffect(() => {
    const subscription = watch((value, { name, type }) =>
      console.log(value, name, type)
    )
    return () => subscription.unsubscribe()
  }, [watch])


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


  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input type="checkbox" {...register("showAge")} />


        {/* showAge가 true일 때만 나이 입력 필드 표시 */}
        {watchShowAge && (
          <input type="number" {...register("age", { min: 50 })} />
        )}


        <input type="submit" />
      </form>
    </>
  )
}

Watch in Field Array

CodeSandbox TS
import * as React from "react"
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" + renderCount,
            lastName: "luo" + renderCount,
          })
        }
      >
        Append
      </button>
    </form>
  )
}
CodeSandbox JS
import * as React from "react"
import { useForm, useFieldArray } from "react-hook-form"


function App() {
  const { register, control, handleSubmit, watch } = useForm()
  const { fields, remove, append } = useFieldArray({
    name: "test",
    control,
  })
  const onSubmit = (data) => 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" + renderCount,
            lastName: "luo" + renderCount,
          })
        }
      >
        Append
      </button>
    </form>
  )
}

비디오

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

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