Mission 2) Login | 로그인 버튼 활성화 (validation) (State & Event)

이해용·2022년 5월 14일
0
post-thumbnail

Mission 2) Login | 로그인 버튼 활성화 (validation)

  1. 입력한 아이디와 비밀번호가 기준에 맞는 경우에만 로그인 버튼 색상이 활성화될 수 있도록 해주세요.
  2. ex. ID - @ 포함 / PW - 5글자 이상
  3. 삼항 연산자 적용해서 조건에 따라 버튼 색상에 변화를 주시기 바랍니다.

1. 입력한 아이디와 비밀번호가 기준에 맞는 경우에만 로그인 버튼 색상이 활성화될 수 있도록 해주세요.

  • scss 에서 버튼 비활성화시에는 배경색이 #b2dffc 으로 넣어주고
    활성화시에는 배경색이 #0095f6 될 수 있도록 값을 넣어준다.
.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;
}

2. ex. ID - @ 포함 / PW - 5글자 이상

ID에 @가 포함되어있는지 확인을 해주기 위해서는 includes method 를 사용하여 값을 확인 할 수 있다. => id.includes('@')
비밀번호에 5글자 이상 값을 확인하는 방법은 pw.length >= 5 로 지정해주면 된다.

위의 내용을 모두 충족할 수 있게 만드는 isInputValue 변수를 선언한다.

const isInputValue = id.includes('@') && pw.length >= 5

3. 삼항 연산자 적용해서 조건에 따라 버튼 색상에 변화를 주시기 바랍니다.

<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의 값을 입력한다.

console.log 확인

id에 @가 없을 때 화면

비밀번호가 5자리 미만일 때 화면

isInputValid 조건이 모두 충족 할 때 console에 확인되는 true 화면

참고 및 출처
위코드 강의
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

profile
프론트엔드 개발자입니다.

5개의 댓글

comment-user-thumbnail
2022년 5월 14일

잘~ 배우고 갑니다 ! 발도장 콩콩 남겨요~

1개의 답글
comment-user-thumbnail
2022년 5월 14일

잘~ 배우고 갑니다 ! 발도장 콩콩 남겨요~

답글 달기
comment-user-thumbnail
2022년 5월 16일

정리가 완벽하네요!!👍🏻

1개의 답글