REACT 로그인 기능

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEye } from '@fortawesome/free-regular-svg-icons';
import { faEyeSlash } from '@fortawesome/free-regular-svg-icons';
import './Login.scss';

class Login extends Component {
  constructor() {
    super();
    this.state = {
      idValue: '',
      pwdValue: '',
      clicked: false,
    };
  }

  //id와 password input에 입력된 value를 this.state에 저장
  //destructuring으로 코드를 간결하게
  handleInput = e => {
    const { value, name } = e.target;
    this.setState({
      [name]: value,
    });
  };

  render() {
    const { idValue, pwdValue, clicked } = this.state;
    let activateLoginBtn = idValue.includes('@') && pwdValue.length >= 5;
    return (
      <div className="LoginPage">
        <section className="loginContainer">
          <h1 className="loginPageLogo">WeBucks</h1>
          <form className="loginForm">
            <input
              className="loginBox"
              id="user"
              name="idValue"
              type="text"
              placeholder="전화번호, 사용자 이름 또는 이메일"
              required
              value={idValue}
              onChange={this.handleInput}
            />
            <div className="pwdBox">
              <input
                className="loginBox"
                id="pwd"
                name="pwdValue"
                type={clicked ? 'text' : 'password'}
                placeholder="비밀번호"
                required
                value={pwdValue}
                onChange={this.handleInput}
              />
              <i
                className="eyeIcon"
				//eye icon 클릭시 비밀번호 show & hide
                onClick={() => {
                  this.setState({
                    clicked: !clicked,
                  });
                }}
              >
                <FontAwesomeIcon icon={clicked ? faEyeSlash : faEye} />
              </i>
            </div>
            <Link to="/list-dabin" className="linkToList">
              <button
                className="loginBox loginBtn"
				//조건문 충족시 로그인 버튼 활성화
                id={
                  activateLoginBtn
                    ? 'changedLoginBtnColor'
                    : 'unchangedLoginBtnColor'
                }
                disabled={activateLoginBtn ? false : true}
              >
                로그인
              </button>
            </Link>
            <Link to="/" className="forgetPwd">
              비밀번호를 잊으셨나요?
            </Link>
          </form>
        </section>
      </div>
    );
  }
}

export default Login;

비구조화 할당

객체에서 값을 추출해 변수 혹은 상수로 바로 선언할 수 있다.

const object = { a: 1, b: 2 };
const { a, b } = object;
console.log(a); // 1
console.log(b); // 2

//배열에서
const array = [1, 2];
const [one, two] = array;

console.log(one); //1
console.log(two); //2

https://learnjs.vlpt.us/useful/06-destructuring.html