.buttonLogin {
@include buttonShape;
background-color: #0095f6;
}
.buttonLoginDisabled {
@include buttonShape;
background-color: #b2dffc;
}
//variables.scss에서 buttonShape의 값은 아래와 같다.
@mixin buttonShape {
color: white;
width: 268px;
height: 30px;
margin: 8px 40px 8px 40px;
border: none;
border-radius: 5px;
}
ID에 @가 포함되어있는지 확인을 해주기 위해서는 includes method 를 사용하여 값을 확인 할 수 있다. => id.includes('@')
비밀번호에 5글자 이상 값을 확인하는 방법은 pw.length >= 5
로 지정해주면 된다.
위의 내용을 모두 충족할 수 있게 만드는 isInputValue 변수를 선언한다.
const isInputValue = id.includes('@') && pw.length >= 5
<button>
태그에 className을 isInputValue 변수에 맞게 버튼 색을 변경할 수 있도록 지정해주고 disabled 속성을 isInputValue 조건에 맞지 않으면 비활성화, 조건에 맞으면 활성화 할 수 있도록 선택해주며 이때 삼항 연산자를 사용한다.
<button
type="button"
onClick={goToMain}
className={isInputValid ? 'buttonLogin' : buttonLoginDisabled'}
disabled={isInputValid ? false : true}
>
className={isInputValid ? 'buttonLogin' : buttonLoginDisabled'}
은 isInputValid
의 값이 true 일 때 buttonLogin className이 button 태그에 적용되고 false라면 buttonLoinDisabled 값이 적용된다.
disabled={isInputValid ? false : true}
은 삼항연산자 속 isInputValid 조건이 충족되지 않으면 버튼이 비활성화 되야하므로 truthy 쪽에 false의 값을 입력한다.
참고 및 출처
위코드 강의
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
https://intrepidgeeks.com/tutorial/react-westagram
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/includes
잘~ 배우고 갑니다 ! 발도장 콩콩 남겨요~