[React] react-hook-form의 useWatch를 이용해 실시간으로 폼 데이터 확인하기

 

 

이슈 발생

회사에서 업무를 보면서 폼 데이터를 구현할 일이 많았는데요.

react-hook-form을 이용하면 폼 데이터를 쉽게 관리할 수 있었습니다.

 

 

 

그런데, 폼 데이터 필드 갯수가 10개를 넘어 30개 정도로 굉장히 많은 경우가 있습니다. 🤔

필드별로 onChange 이벤트에 로그를 찍어서 필드값을 확인할 수도 있고,

폼 전송 시, onSubmit 이벤트를 이용해서 모든 필드값을 로그로 찍을 수 있습니다.

 

 

 

하지만, 필드값을 반복적으로 수정하는 경우

Submit 버튼을 누르는 것도 귀찮기도 하고, 번거롭습니다 ;;;   😢

 

 

 

 

 

react-hook-form 코드 예시

import { useForm } from 'react-hook-form';

const INPUTS = {
  input1: 'input1',
  input2: 'input2',
  input3: 'input3',
  input4: 'input4',
  input5: 'input5',
};

function TestPage() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (values) => {
    console.table(values);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register(INPUTS.input1)} />
      <input {...register(INPUTS.input2)} />
      <input {...register(INPUTS.input3)} />
      <input {...register(INPUTS.input4)} />
      <input {...register(INPUTS.input5)} />
      <button type="submit">SUMBIT</button>
    </form>
  );
}

export default TestPage;

 

 

 

 

 

폼 데이터 값 확인이 불편함

디버깅이 번거롭습니다...

 

 

 

 

 

useWatch API 사용하기

react-hook-form 공식문서에서 소개된 여러 기능을 사용해보다가 useWatch API를 알게 되었습니다.
useWatch API는 특정 필드나 폼 전체의 값을 구독하고 실시간으로 값을 감지할 수 있습니다.
useWatch API를 통해 필드가 구독된 컴포넌트는 리렌더링됩니다.

 

 

 

const { register, control, handleSubmit } = useForm();

// 특정 필드만 감지하는 경우
const input1 = useWatch({
    control,
    name: INPUTS.input2,
  });

// 모든 필드를 감지하는 경우
const all = useWatch({
  control,
});

/**
 * 구독한 필드값을 로그로 찍음
**/
console.table(input1);
console.table(all);

 

 

 

 

 

useWatch API 적용 후, 폼 데이터 확인하기

useWatch API를 적용한 후, 모든 필드값을 구독하게 했습니다.
이제 필드값에 값만 넣어도, 모든 필드값을 로그로 확인할 수 있습니다.
실시간으로 폼 데이터를 간편하게 확인할 수 있습니다....!   🤗

 

 

useWatch API 적용 후, 디버깅