🌎 버튼색 바꾸기 구현

🌎 전체 코드

class LoginYj extends React.Component {
  constructor() {
    super();
    this.state = { id: "", pw: "" };
  }
  goToMain = () => {
    this.props.history.push("/main-yeonju");
  };

  handleidInput = (event) => {
    this.setState({
      [event.target.id]: event.target.value,
    });
  };

  changeHandlerBgColor = () => {
    return this.state.id.includes("@") && this.state.pw.length >= 5
      ? "blue"
      : "";
  };

render

              <input
                className="inputId"
                type="text"
                placeholder="전화번호, 사용자 이름 또는 이메일"
                onChange={this.handleInput}
                name="id"
              />
              <input
                className="inputPw"
                type="password"
                placeholder="비밀번호"
                onChange={this.handleInput}
                name="pw"
              />
            <div className="login">
              <button
                className={this.changeHandlerBgColor()}
                onClick={this.changeButton}
              >
                로그인
              </button>
            </div>

진행과정

id와pw input에 같은 함수를 걸어주면 됐지만 state값이 서로 다르기 때문에
어떻게 하면 좋을까..하고 다른분들의 코드를 하나씩 찾아 보았다

input에 onChange 걸어주기

state 값으로 id와 pw를 빈스트링으로 설정해줬다. 여기서 onChange가 일어나면 handleInput이 실행이 되게 함수를 걸어줬다 input 태그에는 name이라는 속성이 있는데 input 이름을 지어준 name의 속성 덕에 handleInput 의 함수를 합칠 수 있다. name 속성은 value처럼 e.target 속성으로 가져올 수 있다.
이것을 계산된 속성명 이라 한다.

• 계산된 속성명

  객체의 속성값 일부가 이미 변수로 존재한다면 이름만 적어주면 된다.
  꺽쇠괄호 [] 로 속성 이름을 감싸면 이름을 동적으로 만들 수 있다.
  괄호에는 내장함수, 메서드, 계산식, 변수 를 넣을 수 있다.

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

input창에 text가 입력되었을때 함수가 실행되며 빈스트링이 setstate 된다!
console.log 창을 확인해보면 input창에 사용자가 치는 text값이 그대로 찍힌다

조건에 충족했을 때 button색 바꾸기 (삼항연산자)

button 에 changeHandlerBgColor 함수를 호출하였고
이 함수는 아이디에 @ 포함되거나 패스워드 길이가 5 이상일 때에만 blue로 색깔이 변경되고 그렇지 않으면 실행될 수 없게 빈스트링을 넣어주었다!