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>
  )
}