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

password도 같은 방법으로 해주면 된다.

완성 코드

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

function Login() {
  const navigate = useNavigate();
  const [idValue, setIdValue] = useState('');
  const [password, setPassword] = useState('');
  const [disable, setDisable] = useState(true);
  const [opacity, setOpacity] = useState(0.5);

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

  const handleInput = event => {
    return event.target.value;
  };


  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="전화번호, 사용자 이름 또는 이메일"
          onChange={event => {
            setIdValue(handleInput(event));
            console.log(idValue);}}/>
        <input
          type="password"
          placeholder="비밀번호"
          onChange={event => {
            setPassword(handleInput(event));}}/>
        <button>
          로그인
        </button>
      </div>
      <div className={styles.lostPasswordBox}>
        <Link to="/" className={styles.ghLink}>
          비밀번호를 잊으셨나요?
        </Link>
      </div>
    </section>
  );
}

export default Login;

버튼에 불 들어오기

이제 필요한 것은 로그인 버튼에 불이 들어오게 하는 것이다.
조건을 다시 생각해보자.

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

이 조건에 대한 식은 아주 간단하다.

idValue.includes('@') && password.lengh >= 5

이제 중요한 것은 button에게 이 조건을 알려주는 방법이다. 그 전에! 버튼의 속성들을 추가해야한다.

1. disable : 버튼 비활성화
2. opacity : 불투명도

<button
	disable = {}
    style = {{opacity: }}
    > 로그인 </button>

내가 버튼에게 주고 싶은 것은 아래와 같다.

1. 조건에 맞으면 버튼을 활성화 시켜줘 (false)
2. 조건에 맞으면 버튼의 opacity를 1로 만들어줘

state를 쓰면 초기값도 정할 수 있고 값도 갱신할 수 있지 않은가? 사용해주겠다.

function Login() {
  const navigate = useNavigate();
  const [idValue, setIdValue] = useState('');
  const [password, setPassword] = useState('');
  const [disable, setDisable] = useState(true);
  const [opacity, setOpacity] = useState(0.5);

그리고 이 조건들에 대한 각각의 함수를 만들어주겠다. (이번엔 clean code의 가르침을 따르겠다.)

const handleopacity = () => {
    idValue.includes('@') && password.length >= 5
      ? setOpacity(1)
      : setOpacity(0.5);
  };

  const handleDisable = () => {
    idValue.includes('@') && password.length >= 5
      ? setDisable(false)
      : setDisable(true);
  };

삼항연산자로 처리했다. 그리고 버튼의 속성들에게도 변수를 전달해줬다.

<button
	disable = {disable}
    style = {{opacity: opacity}}
    > 로그인 </button>

자. 이제 이걸 어디에다가 넣냐가 문제다... 이 함수는 언제 가동되어야할까?
맞다... 아이디와 비밀번호에 값이 변할 때마다 조건에 맞는지 계속 확인해줘야한다. 그러므로 이 함수들은 아이디, 비밀번호 이벤트에 들어가야한다.

		<input
          type="text"
          placeholder="전화번호, 사용자 이름 또는 이메일"
          onChange={event => {
            setIdValue(handleInput(event));
            console.log(idValue);
            handleopacity();
            handleDisable();
          }}
        />
        <input
          type="password"
          placeholder="비밀번호"
          onChange={event => {
            setPassword(handleInput(event));
            handleopacity();
            handleDisable();
          }}
        />

완성!

조건에 맞지 않을 때

조건에 맞을 때

완벽하다! 이제 더 추가해서, 버튼을 누르면 List페이지로 이동하게 해보았다.

		<button
          disabled={disable}
          style={{
            opacity: opacity,
          }}
          onClick={event => {
            goToList();
          }}
        >

정말로 완성했다!!