React: 로그인 버튼에 불 들어오게 하기 (1)

로그인 버튼에 불들어오게 하기...바닐라 js에서는 그토록 간단했던 것이, react에서는 2배로 간단해져버렸다...

로그인 버튼에 불 들어오게 하려면, 2개의 조건이 충족되어야 한다.

1. 아이디에 '@'가 포함될 것
2. 비밀번호가 5자리 이상일 것

이 규칙을 지키면 불이 들어오는 로그인 버튼을 한 번 만들어보자!

버튼 활성화 전 코드

import styles from './Login.module.scss';
import { Link, useNavigate } from 'react-router-dom';


function Login() {
  const navigate = useNavigate();


  const goToList = () => {
    navigate('/main-geunhongLim');
  };

  return (
    <section className={styles.loginBox}>
      <figure className={styles.ghLogo}>
        <img src="images/logo.png" alt="logo" />
      </figure>
      <div className={styles.loginFormBox}>
        <input
          type="text"
          placeholder="전화번호, 사용자 이름 또는 이메일"/>
        <input
          type="password"
          placeholder="비밀번호"/>
        <button/>
          로그인
        </button>
      </div>
      <div className={styles.lostPasswordBox}>
        <Link to="/" className={styles.ghLink}>
          비밀번호를 잊으셨나요?
        </Link>
      </div>
    </section>
  );
}

export default Login;

이렇게 생긴 코드로 구현 화면은 아래와 같다!