React에서는 변하는 값들을 state에서 동적으로 제어해야하기 때문에 Input태그의 value값을
state에서 추적할 수 있게 해야한다.

HTML의 < form > 요소는 사용자의 입력에 따라서 상태가 변경된다.
하지만, react에서는 UI를 묘사하기 위해 선언형 프로그래밍을 사용하므로, 상태를 적절하게 반영하려면 입력이 동적이어야한다.

const Login = () => {
  

  const [email, setEmail] = useState('');
  const [password, setPwd] = useState('');

  const handleInputEmail = e => {
    setEmail(e.target.value);
  };

  const handleInputPwd = e => {
    setPwd(e.target.value);
  };


  const test = () => {
    return email.includes('@') && pwdRegEx.test(password); 
  };

  const pwdRegEx =
    /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{6,12}$/;

  const a = pwdRegEx.test(password);

  const loginConfirm = e => {
    e.preventDefault();
    if (email.length === 0 || a.length === 0) {
      window.alert('sdfsdf');
    } else {
      navigate('/');
    }
  };
  //console.log(a);
  return (
    <div>
      <section className="Login-container">
        <h2 className="Login-title">LOGIN</h2>
        <form className="login-input">
          <input
            className="id-input"
            type="text"
            placeholder="이메일을 입력하세요"
            onChange={handleInputEmail}
            value={email}
          />
          <input
            className="pwd-input"
            type="text"
            placeholder="비밀번호를 입력하세요"
            onChange={handleInputPwd}
            value={password}
          />
          <button className="login-btn" onClick={loginConfirm} disabled={!a}>
            LOGIN
          </button>
          <p class="bottom-check">
            <span className="id-checkbox">
              <input type="checkbox" id="save" />
              <span className="id-save">이메일 저장</span>
            </span>
            <span className="find-account-link">| 이메일 / 비밀번호 찾기 </span>
            <span className="register-link" onClick={goToSignUp}>
              | 회원가입
            </span>
          </p>
          <div className="sns-login">
            <h3>SNS 로그인</h3>
            <ul>
              <li>
                <div className="icon">
                    <img className="facebook" src={facebookIcon}alt="facebook"/>
                    <img className="kakao" src={kakaoIcon} alt="kakao" />
                    <img className="naver" src={naverIcon} alt="naver" />
                </div>
              </li>
            </ul>
            <p className="non-members">
              <a href="">비회원 주문배송 조회</a>
            </p>
          </div>
        </form>
      </section>
    </div>
  );
};

export default Login;

• React에서 < form > 태그를 사용하는 것은 필수가 아니다.
  그렇지만, 단일 페이지와 같이 여러 요스의 그룹으로 이루어진 복잡한 UI를 다룰 때는 < form >으로 구분하는 것이 좋다.

Form 요소의 이벤트

onChange

유저의 입력이 어떤 식으로든 변경될 때 발생하는 것으로, 폼의 입력 요소에 변경이 생기면 발생한다.
ex) 유저가 텍스트를 입력, 옵션 선택, 확인란의 선택 취소 등등

onSubmit

폼을 제출할 때 이벤트가 발생한다.

onInput

요소의 값이 변경될 때 발생한다.(권장 x)

onChange는 이벤트가 포커스를 잃을 때 뿐만 아니라 키를 입력할 때 마다 발생한다.
onInput 은 DOM 의 onInput 이벤트를 감싼 것으로 , 변경할 때마다 발생한다.

참고