React Hook Form의 useWatch와 watch 함수, 제대로 알고 쓰자!

살펴보기

React Hook Form은 React에서 폼을 쉽게 관리할 수 있도록 도와주는 라이브러리입니다. 이 라이브러리에는 폼의 상태를 추적하는 데 사용되는 두 가지 함수가 있습니다. 바로 useWatch와 watch 함수입니다.

useWatch 함수

useWatch 함수는 폼의 입력 값이 변경될 때마다 특정 작업을 수행할 수 있는 함수입니다. 이 함수는 다음과 같은 방식으로 사용됩니다.

import React, { useState, useEffect, useWatch } from "react";
import { Controller, useForm } from "react-hook-form";

const MyForm = () => {
 const { control, register, handleSubmit } = useForm();
 
 const watchedUsername = useWatch({
  name: 'username',
  control
 });
 
 return (
  <form onSubmit={handleSubmit(onSubmit)}>
   <Controller
    control={control}
    name="username"
    render={({ field }) => (
     <input
      value={field.value}
      onChange={e => field.onChange(e.target.value)}
     />
    )}
   />
  </form>
 );
};

 

watch 함수

watch 함수는 useWatch 함수와 동일한 기능을 수행합니다. 단, useWatch 함수와 달리 watch 함수는 폼의 입력 값이 변경될 때마다 특정 값을 반환합니다.

import React, { useState, useEffect, useWatch } from "react";
import { Controller, useForm } from "react-hook-form";

const MyForm = () => {
 const { control, watch, register, handleSubmit } = useForm();
 
 const watchedUsername = watch('username');
 
 return (
  <form onSubmit={handleSubmit(onSubmit)}>
   <Controller
    control={control}
    name="username"
    render={({ field }) => (
     <input
      value={field.value}
      onChange={e => field.onChange(e.target.value)}
     />
    )}
   />
  </form>
 );
};

 

useWatch vs watch

useWatch와 watch 함수는 모두 폼의 상태를 추적하는 데 사용되는 함수이지만, 성능 측면에서 차이가 있습니다. watch 함수는 폼의 입력 값이 변경될 때마다 모든 폼 컴포넌트를 리렌더링합니다. 반면, useWatch 함수는 단위 컴포넌트 내에서만 리렌더링합니다.

따라서, watch 함수를 사용하면 성능에 영향을 미치는 경우가 있습니다. 예를 들어, 폼의 입력 값이 변경될 때마다 폼의 모든 컴포넌트를 리렌더링해야 하는 경우 성능이 저하될 수 있습니다.

반면, useWatch 함수를 사용하면 이러한 문제를 방지할 수 있습니다. 예를 들어, 특정 입력 값의 변경만 감지하고 싶다면 useWatch 함수를 사용하여 해당 입력 값에 대해 리렌더링 범위를 제한할 수 있습니다.

 

성능 비교 영상

watch vs useWatch

 

추천글

React Hook Form의 Controller와 Register 함수: 활용 방법 및 비교

React Hook Form의 Controller와 Register 함수: 활용 방법 및 비교