[React]버튼 조건부 스타일링

조건이 충족되면 버튼이 다른색으로 활성화가 된다

1. 원하는 조건의 버튼 활성화 함수를 만들어주고 삼항 연산자를 이용해 className에 조건부 스타일링을 넣었다
   css에는 색깔만 다른 loginBtn와 loginBtnActive을 만들어줬다.

jsx.file

//로그인 버튼 활성화 함수
  const [btnState, setBtnState] = useState(false);
  const onBtn = () => {
    if (id_ref.current.value && pw_ref.current.value.length > 5) {
      setBtnState(true);
    } else {
      setBtnState(false);
    }
  };
//....
<div className="loginsmallDiv">
  <img src={logo} />
  <input placeholder="아이디" ref={id_ref} onChange={onBtn} />
  <br />
  <input type="password" placeholder="비밀번호" ref={pw_ref} onChange={onBtn} />
  <br />
  <button
    onClick={Loginform}
    className={`loginBtn ${btnState ? "loginBtnActive" : null}`}
  >
    로그인
  </button>
</div>;

2. if문을 onChangeHandler에 넣어주고
   button에 disabled css 클래스을 상함연산자를 넣었다

jsx.file

 const onChangeHandler = (e) => {
    const { name, value } = e.target;
    setNewMember({ ...newMember, [name]: value });

    if (
      newMember.memberId &&
      newMember.nickname &&
      newMember.password.length > 4
    ) {
      setBtnState(true);
    } else {
      setBtnState(false);
    }
  };

//....

<button className="signinBtn"
              type="sumbit"
              disabled={btnState ? false : true}>
              가입 </button>

css.file

.signinBtn {
    border: none;
    background-color: #0095f6;
    font: inherit;
    color: white;
    vertical-align: baseline;
    width: 57%;
    height: 35px;
    border-radius: 4px;
    margin-bottom: 10px;
    cursor: pointer;
  }
  .signinBtn:disabled {
    background-color: #b2dffc;
  }
}