React, code refactoring

westagram 코드리뷰를 받고 리팩토링을 해보았다.

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin flex-spaceBetween-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

scss를 변수 설정한 것은 common.scss 파일로 옮겨 변수로 사용하도록 했다.

onChangeHandler = e => {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

기존에는 2개의 input 태그에 onchage를 각각 받았는데 name 속성과 []를 활용하여
onChangeHandler라는 하나의 함수로 사용하고 있다.

그리고, 화살표 함수를 사용하면 .bind(this)로 함수를 처리하지 않아도 된다.

handleValidation = () => {
    const isInputValid =
      this.state.id.includes("@") && this.state.pw.length > 5;
    this.setState({ btnState: isInputValid ? "btnOn" : "btnOff" });
  };

ID와 PW Input에 유효성 검사를 하여 로그인 버튼의 색상이 바뀌게 하는 코드도
처음에는 style 속성의 backgroundColor를 직접 수정했지만
className을 동적으로 사용하여 리팩토링 하였다.