React 인스타그램 로그인 기능구현

리액트를 배우고 지금 까지 배운 이론을 인스타그램 로그인 기능구현을 통해 적용해보기로 했다

구현 내용

Mission 1) Login | 사용자 입력 데이터 저장

• 다음의 순서에 맞게 코드를 작성하여 ID, PW <input>에 입력된 값을 state 에 저장해주세요.

1. ID <input> 에서 onChange event 발생
2. event 발생 시 handleIdInput 함수 실행
3. handleIdInput 는 이벤트를 인자로 받음
4. event가 일어난 요소에 담긴 value 값 (event.target.value)을 state에 저장
5. 위의 과정을 PW <input> 에도 동일하게 적용
6. 위 순서대로 완료 후 Add : Mission 1 - 사용자 입력 데이터 저장 기능 구현 commit message를 남긴 후 push 해주세요.
   
   

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

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

구현 한 코드

---

class LoginSungho extends React.Component {
  constructor() {
    super();
    this.state = {
      idValue: '',
      pwValue: '',
      disabled: true,
    };
  }

  handleIdInput = event => {
    this.setState(
      {
        idValue: event.target.value,
      },
      () => this.buttonOn()
    );
  };

  handlePwInput = event => {
    this.setState(
      {
        pwValue: event.target.value,
      },
      () => this.buttonOn()
    );
  };

  buttonOn = () => {
    this.setState({
      disabled:
        this.state.idValue.includes('@') && this.state.pwValue.length > 4
          ? false
          : true,
    });
  };

goToMain = () => {
      this.props.history.push('/main-sungho');
  };

.
.
.
render() {
    return (
      <div class="login-page">
        <h1>Westagram</h1>
        <form action="" id="loginForm">
          <input
            onChange={this.handleIdInput}
            className="id"
            type="text"
            placeholder="전화번호, 사용자 이름 또는 이메일"
          />
          <input
            onChange={this.handlePwInput}
            className="pw"
            type="password"
            placeholder="비밀번호"
          />
          <button
            className={
              this.state.idValue.includes('@') && this.state.pwValue.length > 4
                ? 'buttonAble'
                : 'buttonDisable'
            }
            type="button"
            disabled={this.state.disabled}
            onClick={this.goToMain}
          >
            로그인{' '}
          </button>
        </form>
        <p>비밀번호를 잊으셨나요?</p>
      </div>
    );
  }
}

동작 원리

---

1. 상태값이 비어있는 idValue 와 pwValue를 선언한다.

2. id를 작성할 input 과 pw를 작성할 input 에 onChange 이벤트를 선언한다

3. setState를 통해 onChange 이벤트의 조건을 충족했을때 각 input에 적힌 값들을 아까 만둘어둔 빈 state의 값으로 지정한다

4. disabled 속성을 disabled 라는 상태값으로 관리한다 (기본값 true).

5. id는 '@' 를 포함하고 pw는 5글자 이상이라는 조건에따라 disabled 의 상태값을 true와 false로 바뀌도록 삼항 조건 연산자를 통해 관리한다.

6. 또한 앞에 말했던 조건과 동일하게 className에서 조건에 따라 활성화 됐을때와 비활성화 상태의 로그인 버튼의 색상을 달리한다.

7. 로그인 버튼이 활성화 되고 눌렀을때 메인페이지로 이동한다.
   
   

어려웠던 점

---

1. setState 에서 event 를 인자로 받고 event.target 의 의미를 잘 몰랐었다.

2. disabled속성의 값을 바꾸는 방법을 잘 몰랐었다

해결

---

1. event.target 은 console.log를 통해 확인해 보면 input 을 출력한다. event를 인자로 받는것은 이 event.target에 접속하기 위해서다.

2. disabled 속성의 값을 바꾸기 위해서는 disabled의 상태값을 state에서 따로 관리를 해야한다

처음으로 정말 어려운 React를 기능 구현에서 써보았다 너무 어렵지만 해냈다