본문으로 건너뛰기

Watch

</> Watch: WatchProps v7.65.0부터​

useWatch와 동일한 기능을 컴포넌트 형태로 제공하는 React Hook Form 컴포넌트입니다. 다른 컴포넌트 안에서 훅을 사용하는 대신 JSX에서 <Watch />를 직접 사용하여 폼 값을 구독하고 렌더링할 수 있습니다.

Props​

이름타입설명
namestring | string[] | undefined구독할 필드의 이름입니다. (지원 중단 예정인 names prop도 하위 호환성을 위해 계속 허용되지만, 향후 메이저 버전에서 제거될 예정이므로 대신 name을 사용합니다.)
controlObjectcontrol은 useForm에서 제공하는 객체입니다. FormProvider를 사용한다면 선택 사항입니다.
computefunction

선별하거나 계산한 폼 값을 구독합니다.

  • 전체 폼을 구독하되 특정 조건을 만족할 때만 업데이트된 값을 반환합니다.
    const watchedValue = useWatch({
  compute: (data: FormValue) => { 
    if (data.test?.length) return data.test; 

    return ''; 
  }, 
});
  • 특정 폼 값 상태를 구독합니다.
    const watchedValue = useWatch({
  name: 'test', 
  compute: (data: string) => { 
    return data.length ? data : ''; 
  }, 
});
defaultValueunknown폼이 마운트되기 전이며 현재 값이 아직 없을 때 반환할 대체 값입니다. 폼이 마운트되면 실제 현재 폼 값이 이 대체 값보다 우선합니다.
disabledboolean = false구독을 비활성화하는 옵션입니다.
exactboolean = false정확한 이름 일치를 활성화합니다. false(기본값)이면 구독한 이름이 변경된 필드 이름의 접두사이거나 그 반대일 때 구독이 실행됩니다. v7.81.0부터 true이면 구독한 필드 자체나 상위 경로 중 하나가 업데이트될 때 실행되지만, 중첩된 하위 경로가 변경될 때는 실행되지 않습니다. 자세한 내용은 useWatch를 참고하세요.
renderFunction지정한 폼 필드를 구독하고 값이 변경될 때마다 자식 함수를 리렌더링합니다. 상태를 직접 연결하지 않고 JSX에서 폼 값을 선언적으로 사용할 수 있습니다.
예제:​
import { useForm, Watch } from "react-hook-form"

const App = () => {
  const { register, control } = useForm()

  return (
    <div>
      <form>
        <input {...register("foo")} />
        <input {...register("bar")} />
      </form>
      {/* re-render only when value of `foo` changes */}
      <Watch
        control={control}
        name={["foo"]}
        render={([foo]) => <span>{foo}</span>}
      />
    </div>
  )
}