[React] 로그인 실패시 경고문구 구현

💡 생각하기

경고문구가 없는 div의 className을 login-alert라고 하고, visibility: hidden으로 숨겨놓자.

경고문구가 필요할 때, login-alert의 className을 숨겨놓지 않은 log-alert-view로 변경하여 보여주자.

 

✔ 여기서 display: none이 아니라 visibility: hidden을 준 이유는

   경고문구가 있을 때와 없을 때 공간이 사라지는 것을 원하지 않기 때문!!

   (경고문구 밑에 회원가입 버튼의 위치가 변경되지 않기를 원함!)

 

즉, display: none은 아예 사라지게 함

눈에 보이지도 않고, 공간도 존재하지 않음

 

하지만 visibility: hidden은 숨겨놓은 것이므로

눈에 보이지는 않지만, 공간은 존재!!

 

 

▶ 삼항 연산식을 이용하여 경고창 className에 사용할 class 할당

// Login.js

alertClassName() {
    var alert  = this.state.alert
    return alert === false ? 'login-alert' : 'login-alert-view'
  }

return (
    <div className={this.alertClassName()}>
        <h5>회원정보를 확인해주세요</h5>
    </div>
)

/* Login.css */

.login-alert {
    visibility: hidden;
}

.log-alert-view {
    display: flex;
    ...
}

 

로그인 실패시 경고 문구