React_유효성검사

import { useState } from "react";

export default function Login() {

  const [inputs, setInputs] = useState({

    email: "",

    password: "",

  });

  //유효성 체크

  const [didEdit, setDidEdit] = useState({  //입력상태 저장 상태변수

    email: false,

    password: false,

  })

  //유효성 조건 지정

  const emailIsInvalid = didEdit.email && !inputs.email.includes("@");          //이메일에는 @가 반드시 포함

  const passwordIsInvalid = didEdit.password && !(inputs.password.length > 6);  //패스워드는 6자 이상

  console.log(

    "emailIsInvalid: ", emailIsInvalid,

    "passwordIsInvalid: ", passwordIsInvalid

  )

  function handleInputChange(identifier, value) {

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

    //유효성 체크용

    setDidEdit({...didEdit, [identifier]: false});

    console.log(inputs);

    console.log(didEdit);

  }

  function handleSubmit(event) {

    event.preventDefault();

    console.log(inputs);

  }

  function handleInputBlur(identifier){

    setDidEdit({...didEdit, [identifier]: true})

  }

  return (

    <>

      <h2>Login</h2>

      <form onSubmit={handleSubmit}>

       emailIsInvalid###{emailIsInvalid ? "true" : "false"}

       <br></br>

       passwordIsInvalid###{passwordIsInvalid ? "true" : "false"}

        <div>

          <div>

            <label htmlFor="email">email</label>

            <input

              type="email"

              id="email"

              name="email"

              value={inputs.email}

              onChange={(event) =>

                handleInputChange("email", event.target.value)

              }

              onBlur={() => handleInputBlur("email")}

            ></input>

            <span>{emailIsInvalid && <p>email @ 필수</p>}</span>

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

              }

              onBlur={() => handleInputBlur("password")}

            ></input>

            <span>{passwordIsInvalid && <p>password 6자리 이상</p>}</span>

          </div>

        </div>

        <button type="submit">Login</button>

      </form>

    </>

  );

}