React를 이용한 로그인 버튼 활성화

state를 활용하여 id, pw값을 받아온 내용으로 삼항연산자를 이용하여 조건에 따라 로그인 창을 활성시켜보는 작업을 하였다. 아래 코드를 통해 확인 해 보도록 하겠다.

import { useNavigate } from 'react-router-dom';
import { useState } from 'react';

import './Login.scss';

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

  const goToMain = () => {
    navigate('/main-jonghyuk');
  };

  const [id, setId] = useState(' ');
  const saveUserId = event => {
    setId(event.target.value); // onChage 이벤트를 이용하여 id값을을 state에 담아줌
  };

  const [pw, setPw] = useState(' ');
  const saveUserPw = event => {
    setPw(event.target.value); // onChage 이벤트를 이용하여 pw값을을 state에 담아줌
  };

  const isDisabled = id.includes('@') && pw.length >= 5;
  // isDisabled변수에 id값에 @포함과 pw값의 길이가 5이상이여야 된다는 조건을 담아줌

  return (
    <div className="login">
      <div className="backGround">
        <h1 className="logo">westagram</h1>
        <div className="container">
          <input
            onChange={saveUserId}
            type="text"
            placeholder="전화번호, 사용자이름 또는 이메일"
            className="login"
          />
          <input
            onChange={saveUserPw}
            type="password"
            placeholder="비밀번호"
            id="pw"
            className="login"
          />
          <button
            id={isDisabled ? 'loginBtn' : 'loginDisabled'}
// isDisabled에 담긴 조건을 이용하여 삼항연산자를 만들어 주었고 조건이 참일씨 id명이 loginBtn, 거짓일시 loginDisabled 실행하도록 작성
            className="login"
            onClick={goToMain}
            disabled={isDisabled ? false : true}
// isDisabled에 담긴 조건을 이용하여 삼항연산자를 만들어 주었고 조건이 참일씨 로그인버튼 활성화, 거짓일시 로그인버튼 비활성화 작성
          >
            로그인
          </button>
        </div>
        <a
          className="forgotPw"
          href="https://www.instagram.com/accounts/password/reset/"
        >
          비밀번호를 잊으셨나요?
        </a>
      </div>
    </div>
  );
}

export default Login;