Nextjs Boilerplate 만들기 - 6 [React Hook Form 도입]

React Hook Form 은 폼 밸리데이션 라이브러리입니다. 성능, 유연성, 확장성이 우수합니다.

사용성도 쉬우며 직접 작성한 Component 의 입력 요소에도 사용가능 합니다. 

또한 재렌더링 수를 최소한으로 억제합니다.

 

우선 라이브러리를 설치합니다.

 

yarn add react-hook-form

 

TEST 용으로 TestForm 파일을 작성합니다.

 

import { SubmitHandler, useForm } from 'react-hook-form'
import { styled } from 'styled-components'

type MyFormData = {
  firstName: string
  lastName: string
  category: string
}

export default function TestForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<MyFormData>()
  const onSubmit: SubmitHandler<MyFormData> = (data: MyFormData) => {
    console.log(data)
  }

  return (
    <Wrapper>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input
          {...register('firstName', { required: true })}
          placeholder='이름'
        />
        {errors.firstName && <div>이름을 입력해 주세요</div>}
        <input {...register('lastName', { required: true })} placeholder='성' />
        {errors.lastName && <div>성을 입력해 주세요</div>}
        <select {...register('category', { required: true })}>
          <option value=''>선택...</option>
          <option value='A'>카테고리 A</option>
          <option value='B'>카테고리 B</option>
        </select>
        {errors.category && <div>카테고리를 선택해 주십시오</div>}
        <input type='submit'></input>
      </form>
    </Wrapper>
  )
}
const Wrapper = styled.div`
  padding: 40px;
`

 

값이 입력되지 않은 input 요소 하단에 error을 표시해주는 간단한 코드를 작성했습니다. 

 

실행 후 Input 값을 입력하지 않고 제출 버튼을 눌러 테스트를 해보겠습니다.

 

Error 테스트

 

React Hook Form 을 사용하면 이와같이 간단하게 form 데이터의 Validation 체크를 쉽게 할 수 있습니다.