[react] useWatch vs watch

react-hook-form 을 이용해 폼 작성을 구현하는 도중에  이미 기초값이 있는 폼 필드에서 새로운 값으로

수정을 하려면 해당 필드를 찾아야 했다. 그래서 처음엔 watch 속성을 사용했다.

 

const counselTime = watch('counselTime')

<Controller
 control={form.control}
  name="counselTime"
  render={({ field }) => (
     <input
      value={field.value}
      onChange={e => field.onChange(e.target.value)}
     />
)} />

 

watch는 폼의 입력 값이 변경될 때마다 특정 값을 반환한다.

예를 들어 5개의 input이 있을때 하나의 input 값만 바뀌어도 5개 모두 다 리렌더링이 되버려서 성능 최적화에 적합하지 않는다는 것!

 

공식 문서에도 이렇게 나와있는 걸 볼 수 있다.

' watch는 호출될 때 어플리케이션 또는 Form을 전부 리렌더링하므로 성능 이슈가 발생한다면 별도의 콜백함수 또는 useWatch를 사용하세요 '

 

 

  const counselTime = useWatch({
    control: form.control,
    name: "counselTime",
  });

 

이렇게 어떠한 요소를 찾을 때 watch 속성을 쓸 수는 있지만 굳이 모든 컴포넌트를 리렌더링 할 필요가 없기에

useWatch를 사용함으로써 해당 입력 값에 대해 리렌더링 범위를 제한할 수 있다는 특징이 있다.