👍ログインページ機能の実装

マイクロマップクローンを作成し、ログインページの最後の作業を行いました.
コードを見て整理しよう

class Login extends React.Component{
	this.state = {
      id:"",
      password:"",
      hiddenPW:true,
    };
}

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

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

👉まず、idとpasswordが値を入力して使用できるようにする関数をログインページに宣言します.

checkValidation = e => {
  e.preventDefault();
  const { id, password } = this.state;
  if(id.includes ("@") && password.length >=4){
    this.props.history.push("/main);
    }
  if(!id.includes ("@"){
    alert("id는 @가 필요합니다");
    }
  if(!password.length >= 4){
    alert("비밀번호는 4자 이상!");
  	}
  }

const { id, password } = this.state;

👉上のidとpasswordを非構造化割当にバインドします.
非構造化配分を習い始めたばかりの頃は気まずいので理解しにくい.
簡単に考えれば、数学の授業の置き換えに考えればいい.
いったん発表されたらthis.state.idのように長く打つ必要はなく、idだけを使っても同じ結果値が得られます.

e.preventDefault();

👉上記の構文では、イベントをキャンセルできる場合は、イベントの伝播を阻止せずにイベントをキャンセルします.
イベントをキャンセルするときにpreventDefaultを呼び出すと、エッジの破棄ブラウザによって処理される既存のアクションは機能しないため、イベントは発生しません.

  if(id.includes ("@") && password.length >=4){
    this.props.history.push("/main);
    }
  if(!id.includes ("@"){
    alert("id는 @가 필요합니다");
    }
  if(!password.length >= 4){
    alert("비밀번호는 4자 이상!");
  	}

👉上のifはログインページで実現したい内容をコードしています.
パスワードが4文字未満の場合にホームページに接続するためにincludeという方法を使用して@かどうかを決定します.
以下のalert付きコードは、不要な場合にホームページにジャンプして警告ウィンドウを表示できないように設定されています.

👍無効なコードと修復

if(id.includes ("@") && password.length >=4){
    this.props.history.push("/main);
    }
```
👉위의 경우 this.props.history.push를 통하여 조건이 만족할때 메인페이지로 넘어가게 수정한 것이다.
처음의 코드는 window.location.href 라는 코드를 통하여 페이지내에서 다른 페이지로 넘어가는 방식이 아닌 http주소를 복사해서 경로를 지정해주었다
하지만 이러한 방식은 react로 안티코드입니다.
이유는 Single Page Application 방식에 어긋나기 때문이다.

👍コードコメントありがとうございます

😊😊😊以上のコードの良さを感じました.
お互いのコードを見てgithubでコメントを書きました.
私の間違った習慣から
間違った方法を使うと、正しい方法を使うのに役立ちます.
大まかに読むことができ、大まかなコメントができる状況で、よく読むと、少し進歩して助けてくれた同期の容奭の栄光、そして全体的によく把握してくれた崔俊指導者、ありがとうございました.😊😊😊