[(과제) [React] State, Props, Event] - 2

Mission 2) Login | 로그인 버튼 활성화 (validation)

• 입력한 아이디와 비밀번호가 기준에 맞는 경우에만 로그인 버튼 색상이 활성화될 수 있도록 해주세요.
• ex. ID - @ 포함 / PW - 5글자 이상
• 삼항 연산자 적용해서 조건에 따라 버튼 색상에 변화를 주시기 바랍니다.
• 위 순서대로 완료 후 Add : Mission 2 - 로그인 버튼 활성화 기능 구현 commit message를 남긴 후 push 해주세요.

---

퍼블리셔로 지내면서 만들엇던 이벤트 핸들러와는 너무 달라 이해하기 까지 시간이 좀 걸렷다.
아무리 생각해도 멘토님께서 예제를 들어주셧던 부분으로만은 이해가 힘들어 검색해 가면서 해당 내용을 작성하였다.

지금 중요한 것은 내가 코드를 작성해가면서 하나하나 기억하고 다음 프로젝트를 진행할떄 해당 내용을 토대로 다음 내용을 진행하는 것이라고 생각했기 떄문이다.

---

1. state값의 변화에 따라 변하는 button의 disabled 지정하기

button색상을 조절하는 방법은 두가지가 있는데 퍼블리셔때 내가 쓰던 방법인 button의 attribute를 변경하는 방법으로 해보기로 했다.

<button
  type="button"
  className="btn-login"
  disabled={
    this.state.idInputValue.indexOf('@') !== -1 &&
    this.state.pwInputValue.length > 5
      ? false
      : true
  }
  onClick={this.goMain}
>
    

react에선 두가지의 경우의 수를 확인할땐 if 문이나 if else문 대신에 삼항연산자를 해당 element의 attribute에 직접 적용한다는 것에...신선한 충격을 받았다.

html에선 직접 조절할수 없던 js를 html를 쓰는 것 같으면서 reacty는 html 자체도 js로 쓰고있다는 부분을 새로 알게끔 각인시켜주는 부분 이었기 때문이다.

  //link handle
  goMain = () => {
    this.props.history.push('/main-unseo');
  };

해당 이벤트 핸들러는 button태그가 활성화 되면 main화면으로 갈수있게끔 걸어둔 함수이다.

---

1. state값의 변화에 따라 변하는 button의 className 지정하기

// .js

    <button
       type="button"
       onClick={this.goToMain}
       className={'btn' + (this.state.isActive ? 'Active' : 'Disabled')}>
      로그인
    </button>

element의 어떤 attribute든 {}를 치면 그 안에 내용을 함수처럼 사용한다는 것을 해당 부분을 검색하면서 확인 할 수 있었다.

button 태그 내 className에 조건문 부여하여 state값에 따라 className이 변하도록 한다
state의 isActive라는 key의 value값이 true 이면 className="btnActive"가되고 false 이면 className="btnDisabled"가 된다.
변하는 className에 따라 button 색상이 변하도록.scss에 해당 클래스 이름을 선택자로 속성을 부여한다

2. state key:value 값 정의

constructor() {
 super();
   this.state = {
    isActive: false,
  }
}
    

위의 버튼에서 this.state.isActive에 접근하여 조건을 부여하였으므로 this.state의 isActive라는 key값의 초기 value값의 boolean을 false로 지정해준다.
(로그인 input에 아무것도 입력되지 않은 초기 값은 btnDisabled여야 하기 때문에

3. input입력 시 실행되어야 하는 함수 정의

  changeButton = () => {
    if (this.state.idValue.includes('@') && this.state.pwValue.length >= 5) {
      this.setState({ isActive: true });
    } else {
      this.setState({ isActive: false });
    }
  };

ID input창에는 @값을 포함해야하고, PW input 창에는 5글자 이상값이 입력되어야
isActive값이 false -> true로 변하도록
(input조건 만족 -> state값 변화 -> button의 className 변화 --> className에 따라 scss적용)

💡 효율적인 코드를위해 아래내용을 반영하여 수정하였다.
수정한코드

  changeButton = () => {
    const { idValue, pwValue } = this.state;
  idValue.includes('@') && pwValue.length >= 5
    ? this.setState({ isActive: true })
    : this.setState({ isActive: false });
};

구조 분해 할당을 통해 변수로 state value값애 접근하도록 코드를 수정했다
if문을 삼항 조건 연산자로 수정했다.

4. input태그에 이벤트 걸어주기

<input
  className="idInput"
  type="text"
  placeholder="전화번호, 사용자 이름 또는 이메일"
  onChange={this.handleIdInput}
  onKeyUp={this.changeButton}   //⭐onKeyUp이벤트에 changeButton함수 적용⭐
  name="idValue"
   />
 <input
  className="pwInput"
  type="password"
  placeholder="비밀번호"
  onChange={this.handleIdInput}
  onKeyUp={this.changeButton}  //⭐onKeyUp이벤트에 changeButton함수 적용⭐
  name="pwValue"
  />
    

---

두가지 방법 모두 잘 기억해야 할 것 같다.

적용한 매서드들은 굉장히 많이 쓰는 매서드 들 이므로 잘 기억해야 할 것 같다.

---

indexOf() - 해당 string이 있는지 없는 지 확인 후 지정 string 이 잇으면 -1 을 반환
history.push() - 페이지 이동시에도 props를 넘겨줌
includes() - 문자열이 특정 문자열을 포함하는지 확인하는 메서드, IE는 Edge부터 지원