[1차 프로젝트] Westagram clone -코드리뷰 [Login page]

Bad point

1. 구조분해할당과 불필요한 삼항연산자

My code

  changeButton = () => {
    this.state.inputIdValue.indexOf('@') !== -1 &&
    this.state.inputPwValue.length >= 5
      ? this.setState({ isButtonOn: true })
      : this.setState({ isButtonOn: false });
  };
  }

리팩토링

  changeButton = () => {
    const { inputIdValue, inputPwValue } = this.state;
    this.setState({
      isButtonOn: inputIdValue.indexOf('@') !== -1 && inputPwValue.length >= 5,
    });
  };

2. Boolean 특성

My code

 <button
 className={isButtonOn ? 'changeBtnColor' : 'button'}
 onClick={this.goToMain}
 disabled={isButtonOn ? false : true}
 >

리팩토링

 <button
 className={isButtonOn ? 'changeBtnColor' : 'button'}
 onClick={this.goToMain}
 disabled={!isButtonOn}

3. 최상위 className은 컴포넌트와 동일하게

My code

  render() {
    const { isButtonOn } = this.state;
    return (
      <div className="loginContainer">

리팩토링

  render() {
    const { isButtonOn } = this.state;
    return (
      <div className="login">

4. id 남발하지 않기

My code

        <input
          id="id"
          name="inputIdValue"
          className="logininput"
          type="text"
          placeholder="전화번호, 사용자 이름 또는 이메일"
          onChange={onChange}
          onKeyUp={changeBtn}
          value={inputIdValue}
        />
        <input
          id="pw"
          name="inputPwValue"
          className="logininput"
          type="password"
          placeholder="비밀번호"
          onChange={onChange}
          onKeyUp={changeBtn}
          value={inputPwValue}
        />

리팩토링

        <input
          name="inputIdValue"
          className="logininput"
          type="text"
          placeholder="전화번호, 사용자 이름 또는 이메일"
          onChange={onChange}
          onKeyUp={changeBtn}
          value={inputIdValue}
        />
        <input
          name="inputPwValue"
          className="logininput"
          type="password"
          placeholder="비밀번호"
          onChange={onChange}
          onKeyUp={changeBtn}
          value={inputPwValue}
        />

Good point

1. 구조분해할당

class LoginBox extends React.Component {
  render() {
    const { onChange, changeBtn, inputIdValue, inputPwValue } = this.props;

2. 계산된 속성명 "name" 이용하여 동일한 함수 합치기

  handleInput = event => {
    const { name, value } = event.target;
    this.setState({
      [name]: value,

name은 input tag 에만 있는 속성!