6.20 <React> 조건에 맞는 CSS표시하기.(버튼비활성화)

클론코딩 프로젝트 도중 내가 원하는 조건에 따라 버튼을 비활성화 활성화 시키고 싶었는데, 아직 코딩이라는 분야에 들어온지 1달 남짓되어, 이해력이 아직은 많이 부족한 상태여서 여러 글을 종합하여 내가 이해한 바를 정리 겸, 또다른 나와같은 사람에게 도움이 되었으면 하는 바램에 글을 작성합니다.

버튼 비활성화 하기

 <Button onClick={loginAxios}
       disabled={username === '' || password === '' ? true : false}>로그인</Button>

)

const Button = styled.button`
margin-bottom: 12px;
width: 100%;
max-width: 100%;
color:#fff;
background-color: ${props=>props.disabled? 'gray': '#4a154b;' };
border: none;
font-size: 18px;
font-weight: 900;
height: 44px;
min-width: 96px;
padding: 0 16px 3px;
transition: all 80ms linear;
user-select: none;
outline: none;
cursor: pointer;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);

${props=>props.disabled? '' : &:hover { background-color: rgba(74, 21, 75, 0.9); border: none; } };

&:focus {
--saf-0: rgba(var(--sk_highlight, 18, 100, 163), 1);
box-shadow: 0 0 0 1px var(--saf-0), 0 0 0 5px rgba(29, 155, 209, 0.3);
}}

disabled가 true일때 버튼은 비활성화되고 false일때 활성화된다.
&:hover 쪽은 백틱으로 감싸야한다 그래야만 &와 hover를 문자열로 인식하지 않는다.

그에따라서 css도 그에맞게 비활성화(true)일때 background-color를 회색
활성화(false)일때 파란색을 설정하고 싶었고 ${props=>props.disabled? 'gray': '#4a154b;' }
이렇게 설정하였다. props로 화살표함수처럼 사용하여 ?삼항연산자로 표현해주었다. 그러니까 바아아로 설정되었다.
마치 내가느끼기엔.. state값을 props로 css에(styled component)넘겨준 느낌..? 이었다. 

조건에 맞는 css를 설정하려면..!
 1. 내가 모습을 바꾸려는 요소에 조건을 부여한다. (나의경우 true false로 부여)

2. 내가 바꾸려는 요소에 CSS에 ${props=>props.조건이름? "(참일때 모습)":"(거짓일때모습)" }의 형식으로 넣으면된다!