[Westagram] 001. Login validation

Login

Login 컴포넌트

state

constructor() {
  super();
  this.state = {
    userId: "",
    userPassword: "",
    btnBlock: true,
    btnActClass: false,
  };
}

login form 초기값을 state객체 안에 정의한다.

method

// 로그인 validation
handleLoginInput = (e) => {
const { name, value } = e.target;
  this.setState(
    {[name]: value},
    () => {
      const { userId, userPassword } = this.state;
      if (userId.includes("@") && userPassword.length >= 5) {
        this.setState({
          btnActClass: true,
          btnBlock: false,
        });} else {
        this.setState({
          btnActClass: false,
          btnBlock: true,
        });
      }
    }
  );
};
// 메인으로 이동
goToLink = () => {
  this.props.history.push("/main-hyojeong");
};

LoginCheck 컴포넌트

class LoginCheck extends Component {
  render() {
    const { 
      handleLoginInput, 
      btnBlock, 
      btnActClass, 
      handleClick 
    } = this.props;
    return (
      <form id="login-form" className="login-form">
        <fieldset>
          <input
            type="email"
            id="id-input"
            placeholder="전화번호, 사용자 이름 또는 이메일"
            name="userId"
            onChange={handleLoginInput}
          />
          <input
            type="password"
            id="password-input"
            placeholder="비밀번호"
            name="userPassword"
            onChange={handleLoginInput}
          />
        </fieldset>
        <button
          type="submit"
          id="submit-btn"
          className={"pry-btn " + (btnActClass ? "active" : "")}
          disabled={btnBlock}
          onClick={handleClick}
        >
          로그인
        </button>
      </form>
    );
  }
}

• id, password input이 onChange됬을때 [e.target.name] : e.target.value로 setState한다. id, password input의 name과 e.target.name 을 동일하게 적용하면 해당 state에 값이 들어간다.

• id input에 '@'가 있고, password.length가 5글자 이상일 경우 disabled, css style을 수정하여 login button이 활성화되도록 한다.

• login button이 활성화되고 버튼 클릭시 goToLink함수가 실행되어 main page로 이동한다.