[React Hook Form] React Hook Form 공부 - 2 [7/25 study]

React Hook Form 공부 - 2

 

React-Hook-Form의 Devtool 설치하기

 

npm i -D @hookform/devtools
yarn add -D @hookform/devtools

 

적용법

useForm() 이 사용되는 곳에 아래와 같이 Devtool 컴포넌트를 삽입하면 됩니다.

import { useForm } from 'react-hook-form'
import { DevTool } from '@hookform/devtools'

let renderCount = 0

export default function MyForm() {
  const { register, control } = useForm()

  renderCount++
  return (
    <div className='w-full p-4'>
      <h1 className='mb-5 text-2xl'> Render count : {renderCount / 2}</h1>
      <form>
        <div className='w-1/3'>
          <label htmlFor='username'>Username</label>
          <input type='text' id='username' {...register('username')} />
          <label htmlFor='email'>E-mail</label>
          <input type='email' id='email' {...register('email')} />
          <label htmlFor='password'>Password</label>
          <input type='password' id='password' {...register('password')} />
          <button>Submit</button>
        </div>
      </form>
      <DevTool control={control} />        요기!!!!!!!!!!!!!!!!
      // control은 useForm의 control을 넘겨줘야 함 => 그래야 컨트롤 가능
    </div>
  )
}

 

브라우저에서 화면 맨 위에 작은 Devtool 표시를 누르면 실행되는데요. 

아래 그림과 같이 우리가 register 함수로 등록한 폼의 상태에 대해 여러 가지를 알려줍니다. 

그리고 위 코드에 보시면 renderCount라는 변수를 이용해서 리액트가 다시 렌더링 되는 숫자를 한번 표현해 봤습니다.