컴포넌트 Bootstrap을 이용한 회원등록 폼

[주인장]

import React from 'react';

const Register = () => {

  const registerHandler = (event) => {

    event.preventDefault(); // 기본 제출 방지

    const formData = new FormData(event.target);

    const name = formData.get("name");

    const email = formData.get("email");

    const password = formData.get("password");

    console.log("Name:", name);

    console.log("Email:", email);

    console.log("Password:", password);

  };

  return (

    <div className="d-flex justify-content-center align-items-center vh-100 bg-primary">

      <div className="bg-white p-5 rounded shadow" style={{ minWidth: '500px' }}>

        <h3 className="mb-4 text-center">Register</h3>

        <hr className="mb-4" />

        <form xxonSubmit={registerHandler}>

        <div className="mb-3">

            <label htmlFor="name" className="form-label">Name</label>

            <input

              type="text"

              className="form-control"

              name="name"

              id="name"

              placeholder="이름을 입력하세요."

              required

            />

          </div>

          <div className="mb-3">

            <label htmlFor="email" className="form-label">Email</label>

            <input

              type="email"

              className="form-control"

              name="email"

              id="email"

              placeholder="이메일을 입력하세요."

              required

            />

          </div>

          <div className="mb-3">

            <label htmlFor="password" className="form-label">Password</label>

            <input

              type="password"

              className="form-control"

              name="password"

              id="password"            

              placeholder="비밀번호를 입력하세요."

              required

            />

          </div>

          <button type='submit' className="btn btn-primary w-100">Register</button>

        </form>

        <div className="mt-3 text-center">

          <a href="/login">Already a member? Login</a>

        </div>

      </div>

    </div>

  );

};

export default Register;