TIL _ 로그인 화면 _ 로그인 버튼 클릭 및 엔터키 입력 시 메인 화면으로 이동

1. 로그인 버튼 클릭 시 메인 화면으로 이동

2. 엔터키 입력 시 메인 화면으로 이동

3. 결과

1. 로그인 버튼 클릭 시 메인 화면으로 이동

---

🔓 (문제 파악) 로그인 버튼 클릭 시 메인 화면으로 이동해야 한다.
🔑 (해결 방안)

1. 페이지를 전환시키는 방법에는 <Link /> 를 활용하거나 this.props.history.push() 메소드를 활용하는 방법이 있다.
   1-1. 로그인 버튼이 조건에 따라 활성화/비활성화 되는 로직을 선행해서 처리해야 하므로 this.props.history.push() 메소드를 활용한다.
2. 버튼이 클릭되는 이벤트 발생 시, this.props.history.push() 메소드가 실행되어야 한다.
   2-1. <button> 태그에 onClick 속성을 통해서 this.props.history.push()를 실행하는 함수를 호출한다.

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

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

  btnClick = () => {
    this.props.history.push('/main') // routing 기능을 통해 메인 페이지로 연결된 url를 기재
  }
    
  render() {
    const { username, password } = this.state;
    const { handledInput } = this;
    
    return (
      <form action="">
        <input
          type="text"
          name="username"
          placeholder="ID"
          value={username} 
          onChange={handledInput} 
        />
            
        <input
          type="password"
          name="password"
          placeholder="PW"
          value={password}
          onChange={handledInput}
        />
            
        <button
          onClick={btnClick} // 클릭 이벤트 발생시 btnClick 함수를 호출
          disabled={
          username.includes('@') && 
          password.length >= 5
            ? false
            : true
          } 
        >        
          로그인
        </button>
      </form>
    );
  }
}

---

2. 엔터키 입력 시 메인 화면으로 이동

---

🔓 (문제 파악) 엔터키를 입력했을 때에도 로그인 버튼을 클릭했을 때와 마찬가지로 메인 화면으로 이동해야 한다.
🔑 (해결 방안)

1. 엔터키 입력 이벤트(onKeyPress)가 발생 시, btnClick 이벤트가 실행되도록 한다.
   1-1. 단, 이벤트로 입력된 key가 Enter이고 && ID에 '@'가 포함되며 && 비밀번호의 길이가 5글자 이상이 되어야 실행될 수 있도록 조건문을 포함시킨다.
   1-2. 엔터키 입력이 ID 창과 PW 창 모두에서 발생할 수 있으므로, 각 input 태그에 onKeyPress 속성을 모두 부여해야 한다.

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

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

  btnClick = () => {
    this.props.history.push('/main') // routing 기능을 통해 메인 페이지로 연결된 url를 기재
  }
  
  inputKeyPress = e => {
    const { username, password } = this.state;
    if (e.key === 'Enter' // keyPress 이벤트로 입력된 key가 엔터인지 확인
        && username.includes('@') 
        && password.length >= 5) {
      this.btnClick();
    }
  }
    
  render() {
    const { username, password } = this.state;
    const { handledInput } = this;
    
    return (
      <form action="">
        <input
          type="text"
          name="username"
          placeholder="ID"
          value={username} 
          onChange={handledInput}
          onKeyPress={inputKeyPress} // 엔터키 입력 시 inputKeyPress 함수를 호출
        />
            
        <input
          type="password"
          name="password"
          placeholder="PW"
          value={password}
          onChange={handledInput}
          onKeyPress={inputKeyPress} // 엔터키 입력 시 inputKeyPress 함수를 호출
        />
            
        <button
          onClick={btnClick} // 클릭 이벤트 발생시 btnClick 함수를 호출
          disabled={
          username.includes('@') && 
          password.length >= 5
            ? false
            : true
          } 
        >        
          로그인
        </button>
      </form>
    );
  }
}

---

3. 결과

---

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

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

  btnClick = () => {
    this.props.history.push('/main') // routing 기능을 통해 메인 페이지로 연결된 url를 기재
  }
  
  inputKeyPress = e => {
    const { username, password } = this.state;
    if (e.key === 'Enter' // keyPress 이벤트로 입력된 key가 엔터인지 확인
        && username.includes('@') 
        && password.length >= 5) {
      this.btnClick();
    }
  }
    
  render() {
    const { username, password } = this.state;
    const { handledInput } = this;
    
    return (
      <form action="">
        <input
          type="text"
          name="username"
          placeholder="ID"
          value={username} 
          onChange={handledInput}
          onKeyPress={inputKeyPress} // 엔터키 입력 시 inputKeyPress 함수를 호출
        />
            
        <input
          type="password"
          name="password"
          placeholder="PW"
          value={password}
          onChange={handledInput}
          onKeyPress={inputKeyPress} // 엔터키 입력 시 inputKeyPress 함수를 호출
        />
            
        <button
          onClick={btnClick} // 클릭 이벤트 발생시 btnClick 함수를 호출
          disabled={
          username.includes('@') && 
          password.length >= 5
            ? false
            : true
          } 
        >        
          로그인
        </button>
      </form>
    );
  }
}

---

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