TIL-wecode 23일차

kyj2471·2020년 12월 10일
0

WECODE 15기

목록 보기
13/28

👍로그인 페이지 기능 구현

위스타 그램 클론을 하면서 로그인 페이지 마무리 작업을 하였다.
바로 코드를 보면서 정리 하도록 하겠습니다.

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에서는 제가 로그인 페이지에 구현하고 싶은 사항을 코드화 했습니다.
includes라는 메서드를 사용해 @의 유무를 판단해 비밀번호가 4자이상 처질 경우 메인 페이지로 연결되도록 하였습니다.
밑의 alert가 들어간 코드는 원하지 않은 조건일 경우 main페이지로 넘어가지 못하고 경고창이 뜨도록 설정하였습니다.

👍잘못된 코드 및 수정 사항들

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

👍코드리뷰 감사한 분들

😊😊😊위코드의 장점을 느낄 수 있었습니다.
서로의 코드를 보고 리뷰를 github을 통하여 달아주는 시간이 있었는데
저의 잘못된 주석처리 가독성을 위한 들여쓰기 등 사소한 저의 잘못된 습관부터
잘못된 방식을 사용하고 있으면 맞는 방식을 쓸 수 있게 도와주었다.
대충 읽고 대충 리뷰 할 수도있는 상황에서 꼼꼼히 읽어주고 조금 진도가 저를 위해 도와준 동기 용석님 영광님 그리고 전체적으로 꽉 잘 잡아주신 최준 멘토님 모두 감사합니다😊😊😊

profile
[ frontend-developer ]

0개의 댓글