npm을 사용하여 반응 후크 양식을 설치하는 방법

제출 시 React 후크 양식을 사용하는 방법

import React from "react";
import { useForm } from "react-hook-form";
import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = (data) => console.log(data);
  console.log(errors);

  return (
    <section class="login-block">
      <div className="container-fluid auth-box card">
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="row">
            <div className="md-col-6 offset-4 mt-3">
              <input
                type="text"
                className="form-control"
                placeholder="First name"
                name="First name"
                ref={register({ required: true, maxLength: 80 })}
              />
            </div>
          </div>

          <div className="row">
            <div className="md-col-6 offset-4 mt-3">
              <input
                className="form-control"
                type="text"
                placeholder="Last name"
                name="Last name"
                ref={register({ required: true, maxLength: 100 })}
              />
            </div>
          </div>

          <div className="row">
            <div className="md-col-6 offset-4 mt-3">
              <input
                className="form-control"
                type="text"
                placeholder="Email"
                name="Email"
                ref={register({ required: true, pattern: /^\S+@\S+$/i })}
              />
            </div>
          </div>

          <div className="row">
            <div className="md-col-6 offset-4 mt-3 mb-3">
              <input type="submit" />
            </div>
          </div>
        </form>
      </div>
      <div className="row">
        <div className="md-col-6 offset-4 mt-3">
          <a href="https://askavy.com/react-hooks-forms/">React-hooks-forms</a>{" "}
          , -<a href="https://askavy.com/">React</a>
        </div>
      </div>
    </section>
  );
}