단순 코드 기록/React

React_로그인폼(useState / useRef)

일일일코_장민기 2024. 3. 22. 12:41
728x90
import { useState } from "react";
export default function Login() {
  const [inputs, setInputs] = useState({
    email: "",
    password: "",
  });

  function handleInputChange(identifier, value) {
    setInputs({ ...inputs, [identifier]: value });
  }

  function handleSubmit(event) {
    event.preventDefault();
    console.log(inputs);
  }

  return (
    <>
      <h2>Login</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <div>
            <label htmlFor="email">email</label>
            <input
              type="email"
              id="email"
              name="email"
              value={inputs.email}
              onChange={(event) =>
                handleInputChange("email", event.target.value)
              }
            ></input>
          </div>
        </div>
        <div>
          <div>
            <label htmlFor="password">password</label>
            <input
              type="password"
              id="password"
              name="password"
              value={inputs.password}
              onChange={(event) =>
                handleInputChange("password", event.target.value)
              }
            ></input>
          </div>
        </div>
        <button type="submit">Login</button>
      </form>
    </>
  );
}

 

import { useRef } from "react";
export default function Login() {

  const email = useRef();
  const password = useRef();

  function handleSubmit(event) {
    event.preventDefault();
    const enteredEmail = email.current.value;
    const enteredPassword = password.current.value;
    console.log(enteredEmail, enteredPassword);
  }

  return (
    <>
      <h2>Login</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <div>
            <label htmlFor="email">email</label>
            <input
              type="email"
              id="email"
              name="email"
              ref={email}
            ></input>
          </div>
        </div>
        <div>
          <div>
            <label htmlFor="password">password</label>
            <input
              type="password"
              id="password"
              name="password"
              ref={password}
            ></input>
          </div>
        </div>
        <button type="submit">Login</button>
      </form>
    </>
  );
}