react-hook-form으로 변경에 유연한 form 관리하기

const form = useForm<Inputs>({
  defaultValues: {
    username: '',
    password: '',
  },
  mode: 'onBlur',
  resolver: zodResolver(formSchema),
})

export type UseFormRegisterReturn<TFieldName extends InternalFieldName = InternalFieldName> = {
  onChange: ChangeHandler
  onBlur: ChangeHandler
  ref: RefCallBack
  name: TFieldName
  min?: string | number
  max?: string | number
  maxLength?: number
  minLength?: number
  pattern?: string
  required?: boolean
  disabled?: boolean
}

const { onChange, onBlur, name, ref } = register('username');

<input
  onChange={onChange}
  onBlur={onBlur}
  name={name}
  ref={ref}
/>

// 이렇게 간결하게 표현할 수도 있습니다.
<input {...register("username")} />

<input
  {...register('username', {
    minLength: 4,
    maxLength: 8,
  })}
/>

import { SubmitErrorHandler, SubmitHandler, useForm, UseFormReturn } from 'react-hook-form'

const Component = () => {
  const { handleSubmit } = useForm<Inputs>()

  const onSubmit: SubmitHandler<Inputs> = (data) => {
    console.log('유효성 검사 성공!')
  }

  const onError: SubmitErrorHandler<Inputs> = (errors) => {
    console.error(errors)
  }

  return <form onSubmit={handleSubmit(onSubmit, onError)}>{/* 생략.. */}</form>
}

import { useForm, FormProvider } from 'react-hook-form'

const Component = () => {
  const form = useForm<Inputs>()
  const { handleSubmit } = form

  return (
    <form onSubmit={handleSubmit(onSubmit, onError)}>
      <FormProvider>
        <Username />
        <Password />
      </FormProvider>
    </form>
  )
}

import { useFormContext } from 'react-hook-form'

const Username = () => {
  const { register } = useFormContext<Inputs>()

  return <input {...register('username')} />
}

npm i @hookform/resolvers

export const formSchema = z.object({
  roomType: z.enum(['MORNING, NIGHT'], {
    required_error: '방 종류를 선택해주세요.',
  }),
  certifyTime: z.number(),
  routines: z.array(
    z.object({
      value: z
        .string()
        .trim()
        .min(2, '루틴 내용은 2글자 이상이어야 해요.')
        .max(20, '루틴 내용은 20글자 이하로 입력해주세요.'),
    })
  ),
  title: z
    .string()
    .trim()
    .min(1, '방 제목은 1글자 이상이어야 해요.')
    .max(20, '방 제목은 20글자 이하로 입력해주세요.'),
  userCount: z
    .number()
    .gte(1, '인원을 1명 이상 선택해주세요.')
    .lte(10, '인원을 10명 이하로 선택해주세요.'),
  password: z.literal('').or(
    z
      .string()
      .min(4, '비밀번호는 4자리 이상이어야 해요.')
      .max(8, '비밀번호는 8자리 이하로 입력해주세요.')
      .refine((v) => /^\d*$/.test(v), {
        message: '비밀번호는 숫자로만 입력해주세요.',
      })
  ),
})

const useRoomForm = () => {
  const form = useForm<Inputs>({
    resolver: zodResolver(formSchema),
  })
}

<input {...register('password')} maxLength={8} />

export const FORM_LITERAL = {
  /** 방 종류 */
  roomType: {
    value: ['MORNING', 'NIGHT'],
    message: '방 종류를 선택해주세요.',
  },
  /** 루틴 목록 */
  routines: {
    min: {
      value: 0,
    },
    max: {
      value: 4,
      message: '루틴은 최대 4개까지 등록할 수 있어요.',
    },
    item: {
      min: {
        value: 2,
        message: '루틴 내용은 2글자 이상이어야 해요.',
      },
      max: {
        value: 20,
        message: '루틴 내용은 20글자 이하로 입력해주세요.',
      },
    },
  },
  /** 방 제목 */
  title: {
    min: {
      value: 1,
      message: '방 제목은 1글자 이상이어야 해요.',
    },
    max: {
      value: 20,
      message: '방 제목은 20글자 이하로 입력해주세요.',
    },
  },
  /** 방에 참여할 수 있는 인원 수 */
  userCount: {
    min: {
      value: 1,
      message: '인원을 1명 이상 선택해주세요.',
    },
    max: {
      value: 10,
      message: '인원을 10명 이하로 선택해주세요.',
    },
  },
  /** 방 비밀번호 */
  password: {
    min: {
      value: 4,
      message: '비밀번호는 4자리 이상이어야 해요.',
    },
    max: {
      value: 8,
      message: '비밀번호는 8자리 이하로 입력해주세요.',
    },
    onlyNumeric: {
      message: '비밀번호는 숫자로만 입력해주세요.',
    },
  },
  /** 공지사항 */
  announcement: {
    min: {
      value: 0,
    },
    max: {
      value: 100,
      message: '공지사항은 100글자 이하로 입력해주세요.',
    },
  },
} as const

const L = FORM_LITERAL

export const formSchema = z.object({
  roomType: z.enum(L.roomType.value, {
    required_error: L.roomType.message,
  }),
  certifyTime: z.number(),
  routines: z.array(
    z.object({
      value: z
        .string()
        .trim()
        .min(L.routines.item.min.value, L.routines.item.min.message)
        .max(L.routines.item.max.value, L.routines.item.max.message),
    })
  ),
  title: z
    .string()
    .trim()
    .min(L.title.min.value, L.title.min.message)
    .max(L.title.max.value, L.title.max.message),
  userCount: z
    .number()
    .gte(L.userCount.min.value, L.userCount.min.message)
    .lte(L.userCount.max.value, L.userCount.max.message),
  password: z.literal('').or(
    z
      .string()
      .min(L.password.min.value, L.password.min.message)
      .max(L.password.max.value, L.password.max.message)
      .refine((v) => /^\d*$/.test(v), {
        message: L.password.onlyNumeric.message,
      })
  ),
})

<input {...register('password')} maxLength={FORM_LITERAL.password.max.value} />

const Routines = () => {
  const { register, watch } = useFormContext<Inputs>()
  const watchRoutines = watch('routines')

  return (
    <ul>
      {routines.map((routine, idx) => (
        <li key={routine.id}>
          <input {...register(`routines.${idx}.value`)} />
          <p>{watchRoutines[idx]?.value.length.toString()} / 20</p>
        </li>
      ))}
    </ul>
  )
}

const Routines = () => {
  const { register, control } = useFormContext<Inputs>()
  const watchRoutines = useWatch({ name: 'routines', control })

  return (
    <ul>
      {routines.map((routine, idx) => (
        <li key={routine.id}>
          <input {...register(`routines.${idx}.value`)} />
          <p>{watchRoutines[idx]?.value.length.toString()} / 20</p>
        </li>
      ))}
    </ul>
  )
}

const RoomSettingPage = () => {
  const { register, control } = useForm({ ...생략 })

  return (
    <form>
      <section>
        <label>방 이름</label>
        <input {...register('title')} />
      </section>
      <section>
        <label>공지사항</label>
        <Controller
          name="announcement"
          control={control}
          render={({ field }) => (
            <section>
              <textarea {...register('announcement')} />
              <p>{field.value.length} / 100</p>
            </section>
          )}
        />
      </section>
      <section>
        <label>인증 시간</label>
        <TimePicker {...register('time')} />
      </section>
    </form>
  )
}