[위코드] TIL(Today I am learned) -14

import React, { Component } from 'react';
export class App extends Component {
  constructor() {
    super();
    this.state = {
      id: '',
      pw: ''
    };
  }
  handleID = event => {
    // console.log('event.target.value: ', event.target.value);
    this.setState({
      id: event.target.value
    });
  };
  handlePW = event => {
    // console.log('pw event 실행');
    this.setState({
      pw: event.target.value
    });
  };
  handleLogin = () => {
    // data 송신(fetch)
    fetch('http://localhost:8000/login/', {
      method: 'POST',
      body: JSON.stringify({
        id: this.state.id,
        pw: this.state.pw
      })
    })
      // 인증, 인가 >>> reponse. 데이터 수신
      .then(res => res.json()) // JSON -> JS
      .then(res => {
        if (res.token) {
          localStorage.setItem('token', res.token);
          alert('로그인 성공하셨습니다.');
          this.props.history.push('main');
        } else {
          alert('올바른 사용자가 아닙니다. 회원가입 먼저 해주세요.');
          this.props.history.push('signUp');
        }
      });
  };
  render() {
    return (
      // React Fragment
      <>
        <input
          onChange={this.handleID}
          type="text"
          placeholder="id 입력해주세요"
        />
        <input
          onChange={this.handlePW}
          type="password"
          placeholder="pw 입력해주세요"
        />
        <button onClick={this.handleLogin}>로그인</button>
      </>
    );
  }
}
export default App;

쓉.... 지금 코드 블럭있는걸 알았다.

 

해당 코드는 React에서 state를 초기 설정하고,

jsx부분인 곳에 호출자를 설정하여, 해당 element에서 this.handleID에서 Value값이 변하면 설정하여

미리 짜둔 함수에서 이를 setState를 갱신하여 해당값을 constructor에 들어갈 수 있게한 내용이다.

 

즉 컴퓨터가 1번 constructor를 인식하고

2번인 함수는 건너뛰고

3번인 element를 인식하여 user가 해당창을 치면 input창에선 변하는 것이 있지만, 다시 1번으로 가서 해당 내용이 아직 직 없어서 2번으로 가서 setState가 이를 있는 것으로 바꾸어서 진행해주는 것이다.

 

실질적으로 컴퓨터가 읽어버리는 순서는 1→2→3이지만, 실제 행동로직 루프는 1→3→2→1로가서 헷깔리기 딱이다.

그러다보니 나도 고생했다.

무엇보다 state값을 기본 설정하는 것을 배우긴했지만, 이해가 가지 않았음.

그냥 이를 이해하려면 선배기수의 내용을 복붙하다보면 이해가 되더라.

설명으로는 이해하기 어려운 내용이었음.

import React from "react";
import "./Login.scss";

class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            id: "",
            pw: "",
        }
    };
    
    handleLogin = (e) => {
        fetch("http://10.58.5.136:8000/user/login", {  //해당 주소는 그냥 백엔드측의 주소를 가져온 것이라 작동하지 않음.
            method: "POST",
            body: JSON.stringify({
                email: this.state.id,
                password: this.state.pw
            })
        }).then(res => res.json()) // json body를  js화   // 페치 성공
        .then(res => {
            if (res.token) {
                alert("로그인을 환영합니다.");
                this.props.history.push('/main');
            } else {
                alert("아이디와 비밀번호를 확인해주세요");
            }
        });
    }

    handleId = (e) => {
        this.setState({
            id : e.target.value
        }); 
        console.log(this.setState);
    }

    handlePw = (e) => {
        this.setState({
            pw : e.target.value
        });
        console.log(this.setState);
    }

    render() {
        return (
            <div className="loginbox">
                <div className="middle">
                    <img className="box" src="/images/songsuho/westagram.png" alt="logo.text" />
                    <div className="login">
                        <div className="login_control">
                            <div className="id">
                                <input onChange={this.handleId} className="bar idInput" type="text" placeholder="전화번호, 사용자 이름 또는 이메일" />
                            </div>
                            <div className="id">
                                <input onChange={this.handlePw} className="bar pwInput" type="password" placeholder="비밀번호" />
                            </div> 
                            <div className="id">
                                <button onClick={this.handleLogin} type="button" className={this.state.id.length > 5 && this.state.pw.length > 5 ? "activeBtn" : "unactiveBtn"}>로그인</button>
                            </div>
                            <div className="id">
                                <div className="call">비밀번호를 잊으셨나요?</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Login;

이 부분에서 드럽게 헷깔려서 위코드를 그만둘까 고민도 했었다.(이 길이 내길이 아닌가? 하는...)

멍청했음. 그냥 혼자할 수 있어빌리티에 너무 집착하다보니

주변사람에도 안 묻고 멘토한테도 잘 안 묻게되니 혼자 마음고생했다.

 

아무튼, 해당 로그인 등의 이벤트를 구현하였고, 이제 다음 스텝을 밟아가려고 한다.