[React Hook Form] React Hook Form 공부 - 11 (watch를 이용해서 실시간으로 FormValues 감시하기) [7/25 study]

React Hook Form 공부 - 11

 

watch를 이용해서 실시간으로 FormValues 감시하기

useForm() 함수에는 watch 함수를 제공해 주는데요. 

이 watch 함수를 이용하면 사용자가 현재 입력하고 있는 값을 실시간으로 감시할 수 있습니다.

  const {
    register,
    control,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<FormValues>({
    defaultValues: {
      username: "IU",
      age: 0,
      dob: new Date(),
    },
  });

  const watchForm = watch("username");
  const watchForm2 = watch("age");

  renderCount++;
  return (
    <div className="w-full p-4">
      <h1 className="text-2xl mb-5"> Render count : {renderCount / 2}</h1>
      <h2 className="text-xl mb-5">
        watch value : {watchForm} and {watchForm2}
      </h2>
    ...
    ...
    ...
  )
}

 

위와 같이 작성했습니다. 실행 결과는 아래와 같습니다.

 

위에서 username은 문자열이고 age는 숫자라서 watch 함수를 두 개 사용했는데요. (다른 타입 이라서?)

만약 email 항목이 있다면 watch("username", "email") 이렇게 같이 작성할 수 있습니다. (같은 문자열 이라서?)

그리고 watch() 함수 안에 아무것도 넣지 않으면 Form 전체를 가리킵니다.

 

위 그림을 보시면 리액트가 리렌더링 되는 게 심상치 않습니다. 

그래서 보통 watch 함수는 useEffect 함수 안에 subscription, unsubscribe 방식으로 작성해야 합니다.

import { useEffect } from 'react'

const {
  register,
  control,
  handleSubmit,
  watch,
  formState: { errors },
} = useForm <
FormValues >
{
  defaultValues: {
    username: 'IU',
    age: 0,
    dob: new Date(),
  },
}

useEffect(() => {
  const subscription = watch(value => {
    console.log(value)
  })

  return () => subscription.unsubscribe()
}, [watch])

// const watchForm = watch();
// const watchForm2 = watch("age");

 

실행결과

 

위 그림과 같이 콘솔 창에 실시간으로 watch 함수가 폼 데이터를 보여주고 있지만 리 렌더링이 전혀 일어나지 않고 있습니다.