TIL 18. Westagram 로그인 페이지 기능 (state, event)

⬆️⬆️ 위에는 제가 구현한 페이지 🥰

이제는 Html, Css, JavaScript로 정리했던 코드를 React로 바꿀 때 입니다 !!

우선 로그인에 필요한 기능을 하나씩 구현해 보겠습니댜 👩🏻‍💻 👩🏻‍💻

✔️ id에 @가 포함되어 있는지, pw가 4자리 이상인지 (onChange 사용)

우선 로그인 버튼에 onClick 속성을 넣어줍니다.

onClick={this.checkValidation}

(저는 함수이름을 checkValidation 이라 하겠습니다.)

그리고 적어놓은 class와 render사이에 함수를 적습니다 !

checkValidation = () => {
    const { id, pw } = this.state;
    const checkId = id.includes("@");
    const checkPw = pw.length >= 4;

    if (checkId && checkPw) {
      alert("로그인 성공");
      this.props.history.push("/main페이지파일이름");
    }

    if (!checkId) {
      alert("아이디에는 @가 포함되어야 합니다.");
    }

    if (!checkPw) {
      alert("비밀번호는 4자리 이상이어야 합니다.");
    }
  };

❗️여기서 구조 분해 할당하면 좋은점 : this.state를 쓰지 않아도 된다 (ㄱㅇㄷ)

✔️ pw를 보이게 하는 방법

• password input 태그 아래에 onClick을{this.showPassword} 로 적어줍니다.
  그리고 삼항연산자로 hiddenPw상태가 맞다면 True인 Show가 화면에 나올것이고 그렇지 않은 상태라면 Hide라는 글이 나올 것 입니다 !

<span className="showAndHide" onClick={this.showPassword}>
  {hiddenPw ? "Show" : "Hide"}
</span>

• 이렇게 적었으면 render()위에 hiddenPw를 구조분해 할당하고 히든패스워드와 그렇지 않은것을 같다고 설정해두면 삼항연산자에 썼던 조건이 true or false로 값이 바뀌면서 토글 버튼 상태로 될 것 입니다.

showPassword = () => {
    const { hiddenPw } = this.state;
    this.setState({ hiddenPw: !hiddenPw });
  };

✔️input value가 한 글자 이상씩 있으면 버튼 활성화

로그인 버튼에 삼항연산자로 activateButton이 활성화되면 login-activate가 되고 그렇지 않다면 login-deactive가 되게 할 것 입니다.

className={activateButton ? "login-activate" : "login-deactivate"}

그러기 위해서는 render()와 return()사이에

let activateButton = (id.length && pw.length) >= 1;

activateButton에 대해 선언을 해줘야합니다!
참 쉽쥬 ❓❓

✔️ enter만 쳐도 로그인을 되게 하는 방법

로그인 버튼에 onKeyPress로 enter를 누르자마자 일어나는 이벤트를 넣어 줄 겁니다. 제가 설정한 이름은 handleKeyPress로 !

 onKeyPress={this.handleKeyPress}

그러면 함수에 대해 적어줘야겠쥬❓

handleKeyPress = (e) => {
    if (e.key === "Enter") {
      this.checkValidation();
    }
  };

여기서 checkValidation은 우리가 처음에 적어줬던 함수 조건을 이어서 연결한겁니다 !!

이정도면 로그인에서 구현할 수 있는 기능은 충분(❓)