로그인 기능 구현하기

로그인 성공 시 화면.

로그인 실패 시 화면

로그인 페이지를 구현할 때 로그인 버튼이 on 되는 조건
1. ID input창에 "@"가 포함 되어야 한다.
2. Password의 length가 5개 이상이 되어야한다.
3. 내가 지정한 ID와 Password가 정확해야 함(직접 구현해 봄)
-- 나만 로그인 할 수 있게 하는 기능

내가 작성 한 코드

import React from 'react';
import { withRouter } from 'react-router';
import './Login.scss';
import '../../../styles/common.scss';

class Login extends React.Component {
  state = {
    id: '',
    password: '',
    offButton: false,
  };

  handleIdInput = e => {
    this.setState({
      id: e.target.value,
    });
  };

  handlePasswordInput = e => {
    this.setState({
      password: e.target.value,
    });
  };

  goToMain = e => {
    const { id, password } = this.state;
    e.preventDefault();
    {id === 'zlrz002@naver.com' && password === 'tkdas6708@'
      ? this.props.history.push('/Main-SangCheol')
      : alert('아이디와 비밀번호를 확인해주세요');
  };

  handleInputText = e => {
    const { id, password } = this.state;
    const isButtonActive = id.includes('@') && password.length >= 5;
    this.setState({ offButton : isButtonActive });
  };

  render() {
  const { offButton } = this.state
    return (
      <div className=" sangcheol-Login">
        <section className="section">
          <div className="inner">
            <h1 className="logo-text">Westagram</h1>
            <form onChange={this.handleInputText} className="input-box">
              <input
                type="text"
                placeholder="전화번호, 사용자 이름 또는 이메일"
                className="input-box_login"
                onChange={this.handleIdInput}
              />
              <input
                type="password"
                placeholder="비밀번호"
                className="input-box_password"
                onChange={this.handlePasswordInput}
              />
              <button
                className={offButton ? 'btnOn' : 'offButton'}
                onClick={this.goToMain}
              >
                로그인
              </button>
              <a className="footer_link" href="Null">
                비밀번호를 잊으셨나요 ?
              </a>
            </form>
          </div>
        </section>
      </div>
    );
  }
}

export default withRouter(Login);

코드 해석

먼저 form tag안에 인풋이 2개가 있습니다
1.id를 입력 할 input
2.password 입력 할 input
3.로그인하게 할 버튼

각각의 input에 onChange가 되었을 때, 실행 할 함수인 handleIdInput 과 handlePasswordInput를 props로 넣어줬습니다.

이후, 버튼에 onClick이 되면, goToMain 함수가 동작하게 하는 동작입니다.

함수 동작

1. handleIdInput 함수는 id를 입력하는 input에 onChange 이벤트가 일어나면 (텍스트가 입력되면)
   state가 리랜더링 되면서, 제가 텍스트에 입력한 value가
   state내부의 id key 값으로 들어가게 됩니다.

2. handlePasswordInput함수도 위와 동일하게 패스워드를 입력하는 input에 value가 입력되면 state가 리랜더링 되면서, 제가 입력한 텍스트가 state내부의 password key 값으로 들어가게 됩니다.

3. goToMain함수는 폼태그 안에서 submit이 일어나면 동작하는 함수로 우선 구조분해할당으로 state 값을 받아와주고, submit의 기본동작인 새로고침을 막아줍니다.(e.preventDefalut())
   이후에 id와,password에 입력된 value가 내가 지정한 value가 맞다면, 라우터를 이용해서 MainFeed 페이지로 넘어가게 하였습니다.

4. 하지만 이때 버튼에 클래스를 삼항연산자로 state에 값이 false일 때는 offButton 클래스가 동작해서, 버튼 활성화가 안되어 색이 없지만
   state값이 true로 변경되면, 버튼이 활성화가 됩니다.
   이때 state 값을 true로 변경하기 위해 form에 onchange가 동작하면, handleInputText 함수가 동작하고 이 함수가 하는 역할은
   state에서 구조분해할당으로 받아와서, 변수isButtonActive 안에
   id에 "@"가 포함되있고, password에 길이가 5이상일때 변수가 참이 되고
   state내부의 offButton 키값을 isButtonActive(true)으로 넣어줍니다.