TIL _ 로그인 화면 _ ID, PW 유효성 검사 및 로그인 버튼 활성화

1. 사용자 입력 데이터 저장

2. ID, PW 유효성 검사 및 로그인 버튼 활성화

3. 결과 및 refactoring

1. 사용자 입력 데이터 저장

---

🔓 (문제 파악) input 창에서 ID와 PW가 입력되는 이벤트가 발생 시, 해당 입력값을 state에 저장해야 한다.
🔑 (해결 방안) input 창에 onChange 이벤트를 부여하고, 이벤트 발생 시 이벤트 타겟의 입력값을 state에 저장하는 함수를 구현한다.

class Login extends Component {
  constructor() {
    super();
    this.state = {
      username: '',
      password: '',
    };  
  }

• ID, PW input 태그 각각에 username과 password라는 name을 부여하고 (아래 input 태그 참조), 같은 이름으로 state 객체의 키를 정의합니다.
• 최초의 state 값은 빈 값으로 합니다.

  handledInput = e => {
    this.setState({
      [e.target.name] : e.target.value,
    });
  };

• 객체 안에서 key를 [대괄호] 로 감쌀 경우, 해당 key가 가리키는 레퍼런스의 실제 값을 불러올 수 있습니다.
• 즉, 여기서는 onChange 이벤트가 발생했을 때, 그 이벤트의 타겟인 input의 name 속성에 부여된 "username" 또는 "password"가 불러와지게 됩니다 → state의 키와 일치
• input의 입력값을 e.target.value로 호출하고, setState를 통해서 state값을 변경시킵니다.

  render() {
    return (
      <form action="">
        <input
          type="text"
          name="username"
          placeholder="전화번호, 사용자 이름 또는 이메일"
          value={this.state.username} // state에 저장된 input value를 호출
          onChange={this.handledInput} // onChange 이벤트 발생 시, handledInput 함수 실행
        />
            
        <input
          type="password"
          name="password"
          placeholder="비밀번호"
          value={this.state.password}
          onChange={this.handledInput}
        />
            
        <button> 로그인 </button>
      </form>
    );
  }
}

---

2. ID, PW 유효성 검사 및 로그인 버튼 활성화

---

🔓 (문제 파악) 입력된 ID, PW 가 정해진 조건(ex. ID는 '@' 포함, PW는 5글자 이상)에 부합할 때, 로그인 버튼이 활성화되어야 한다.
🔑 (해결 방안) button에 disabled 속성을 부여하고, 조건문을 활용하여 disabled에 true와 false 속성값을 부여한다.

<button
  disabled={
    this.state.username.includes('@') && // state에 저장된 username 값이 '@'를 포함하는지 확인
    this.state.password.length >= 5 // state에 저장된 password의 length가 5 이상인 지 확인
      ? false
      : true
  } // 두 조건이 모두 true일 때 disabled 속성값은 false → 버튼 활성화
>        
  로그인
</button>

---

3. 결과 및 refactoring

---

class Login extends Component {
  constructor() {
    super();
    this.state = {
      username: '',
      password: '',
    };  
  }

  handledInput = e => {
    this.setState({
      [e.target.name] : e.target.value,
    });
  };

  render() {
    const { username, password } = this.state;
    const { handledInput } = this;
    // destructuring assignment를 활용하여 코드 정리
    
    return (
      <form action="">
        <input
          type="text"
          name="username"
          placeholder="전화번호, 사용자 이름 또는 이메일"
          value={username} 
          onChange={handledInput} 
        />
            
        <input
          type="password"
          name="password"
          placeholder="비밀번호"
          value={password}
          onChange={handledInput}
        />
            
        <button
          disabled={
          username.includes('@') && 
          password.length >= 5
            ? false
            : true
          } 
        >        
          로그인
        </button>
      </form>
    );
  }
}

---

"작성 내용 중 오류나 오타가 있다면, 댓글로 알려주시면 감사하겠습니다. 주니어 개발자에게 남겨주시는 작은 피드백이 큰 도움이 될 것 같습니다. 고맙습니다 :)"