React, code refactoring

msjulyone·2020년 10월 15일
1

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을 동적으로 사용하여 리팩토링 하였다.

profile
Frontend Developer

관심 있을 만한 포스트

0개의 댓글