실전 예제로 알아보는 react hook form 사용법

import React, { useEffect } from 'react'
import ReactDOM from 'react-dom'
import { useForm } from 'react-hook-form'

import './styles.css'

function App() {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm({
    // form value 초기값을 설정할 수 있습니다.
    // 해당 객체의 key값은 항목의 'name'입니다.
    defaultValues: {
      example: '',
      exampleRequired: '',
      exampleRequiredWithMessage: '',
      phone: '',
    },
  })

  // errors는 각 항목 name들을 key로 가지는 map입니다.

  // 예를 들어 type은 다음과 같으며 등록된 항목에 따라 바뀝니다.
  // DeepMap<{example: string; exampleRequired: string; exampleRequiredWithMessage: string;}, FieldError>

  // error가 없을 땐 빈 map입니다.
  // {}

  // error가 발생하면 해당 항목에 에러 정보가 담깁니다. error가 없으면 해당 항목 error 정보는 없습니다.
  // message는 사용자가 지정한 메시지이고, type에는 어떤 validation rule인지가 담깁니다.
  // {
  //   phone: {
  //     message: '올바른 휴대폰 번호를 입력해주세요.",
  //     ref: HTMLInputElement,
  //     type: 'pattern'
  //   },
  //   exampleRequiredWithMessage: {
  //     message: 'example required',
  //     ref: HTMLInputElement,
  //     type: 'required'
  //   }
  // }

  useEffect(() => {
    console.info('errors : ', errors)
  }, [{ ...errors }])

  // watch에 항목의 'name'을 넘겨서 값이 바뀔 때마다 체크할 수 있습니다.
  console.log(watch('example'))

  return (
    <form
      // form 제출을 할 때 유효성 검사에 성공하면 handleSubmit callback의 parameter로 form data가 넘어옵니다.
      // 유효성 검사에 실패하면 실패한 input에 focus가 됩니다.
      onSubmit={handleSubmit(data => {
        alert(JSON.stringify(data))
      })}
    >
      <label>Example</label>
      {/* 항목을 등록할 때 register 함수를 사용합니다.
      'example' 항목을 등록합니다. */}
      <input {...register('example')} />

      <label>ExampleRequired</label>
      <input
        /* register의 두번째 인자로 ValidationRule option을 넘길 수 있습니다.
        require rule과 maxLength rule을 추가합니다. */
        {...register('exampleRequired', { required: true, maxLength: 10 })}
      />
      {/* validation을 통과하지 못하면 errors 객체에 정보가 넘어옵니다.
      message를 등록할 때 지정하지 않고 이렇게 임의로 보여줄 수 있습니다. */}
      {errors.exampleRequired && <p>This field is required</p>}

      <label>ExampleRequiredWithMessage</label>
      <input
        // required rule validation을 통과하지 못했을 때 메시지를 에러 정보에 담고 싶다면 메시지를 바로 넘기면 됩니다.
        {...register('exampleRequiredWithMessage', {
          required: 'example required',
        })}
        // validation rule에 조건을 주고 싶을 때가 있습니다. 그러면 ValidationRule의 형태로 넘기면 됩니다.
        {...register('exampleRequiredWithMessage', {
          required: {
            value: true, // 원하는 조건식
            message: 'example required',
          },
        })}
      />
      {/* errors에 담긴 message를 사용합니다. */}
      {errors.exampleRequiredWithMessage && (
        <p>{errors.exampleRequiredWithMessage?.message}</p>
      )}

      <label>ExampleRequiredWithMessage</label>
      <input
        // validation을 통과하지 못했을 때 메시지를 보여주고 싶다면 required rule에 string을 넘기면 됩니다.
        {...register('exampleRequiredWithMessage', {
          required: 'example required',
        })}
      />
      {errors.exampleRequiredWithMessage && (
        <p>{errors.exampleRequiredWithMessage?.message}</p>
      )}

      <label>Phone</label>
      <input
        // 하이픈이 들어간 휴대폰 번호를 받고 싶다면
        {...register('phone', {
          required: '휴대폰 번호를 입력해주세요.',
          pattern: {
            value: /^01(0|1|[6-9])-(?:\d{3}|\d{4})-\d{4}$/,
            message: '올바른 휴대폰 번호를 입력해주세요.',
          },
          maxLength: 13,
        })}
      />
      {errors.phone && <p>{errors.phone?.message}</p>}
      <input type="submit" />
    </form>
  )
}

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)