[Westagram] 001. Login validation

홍효정·2020년 10월 13일
0

TIL

목록 보기
15/40

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로 이동한다.


구현중에 onChange 값이 하나씩 밀려 안들어가는 현상이 있었는데, 그 이유는 setState가 비동기 메서드이므로 함수 안에서 여러번 setState 할 경우 호출 순서대로 바로 업데이트 하지 않고 단일객체, 함수로 만들어서 setState 하기 때문이었다. 지금은 setState를 한 뒤 두번째 인자로 콜백함수를 전달했지만 저런 방식으로 계속 changing되면 지저분한 코드가 될 것이다.
profile
HHJ velog 🍔

0개의 댓글