React-Hook-Form 으로 편하게 Form 작성하자. (+ custom 으로 input 만드는 것까지)

보통 React 에서 Form 작업을 아무런 라이브러리 없이
작업 하려면, useState 와 onChange 작업을 해줘야하지만,

React Hook Form 으로 작업해주면 간편하게 작업할 수 있다.

워낙 작동방법은 간단해서,
https://react-hook-form.com/ 의 첫페이지만 봐도
잘 사용할 수 있다.

만약, React-Hook-Form 에서 Cutom Input, Custom SelectBox, Custom Chekbox 등을 사용해야한다면 어떻게 해야할까?

나중에 꼭 Custom 으로 작업해야한다면 코드를 참고하자.

import React, { LegacyRef } from "react";
import { Path, UseFormRegister } from "react-hook-form";

type InputProps = {
  label: Path<any>;
  register: UseFormRegister<any>;
  required: boolean;
};

export const Input = ({ label, register, required }: InputProps) => (
  <>
    <label>{label}</label>
    <input {...register(label, { required })} />
  </>
);

export const Select = React.forwardRef<
  HTMLSelectElement,
  { label: string } & ReturnType<UseFormRegister<any>>
>(({ onChange, onBlur, name, label }, ref) => (
  <>
    <label>{label}</label>
    <select name={name} ref={ref} onChange={onChange} onBlur={onBlur}>
      <option value="20">20</option>
      <option value="30">30</option>
    </select>
  </>
));

export const Checkbox = React.forwardRef(
  (
    { label, name, value, onChange, defaultChecked, ...rest }: any,
    forwardedRef: LegacyRef<HTMLInputElement> | undefined
  ) => {
    const [checked, setChecked] = React.useState(defaultChecked);

    React.useEffect(() => {
      if (onChange) {
        onChange(checked);
      }
    }, [checked]);

    return (
      <div onClick={() => setChecked(!checked)} style={{ cursor: "pointer" }}>
        <input
          style={{ display: "none" }}
          ref={forwardedRef}
          type="checkbox"
          name={name}
          value={value}
          checked={checked}
          onChange={(e) => {
            setChecked(e.target.checked);
          }}
        />
        [{checked ? "X" : " "}]{label}
      </div>
    );
  }
);