[TIL] 23/12/01 React 심화: 조건부스타일링 연습 (feat. styled-components)

오늘도 화이팅!

TIL

styled-components 활용 조건부 스타일링

숙련주차 때 해두어야 할것을 지금 다시한다. 왜냐 연습이 안되어있어서 자꾸자꾸 다시 강의자료를 찾아보니까.

강의자료 보기 귀찮으면 그냥 무식한 코드를 생성해 버리니까..

 

아이디, 비번 들어오면 로그인 버튼을 활성화 하는 코드를 작성하려고 한다.

 

1)  무식한 코드 : 지금 과제 코드^.^
로그인 버튼에 호버하면 로그인에 색깔을 주려고 한다.

- 미리 분기해서 css 가 다른 버튼 컴포넌트 호출 (컴포넌트가 두개여야 함)

{
	(id && password) ?
    	<Button> 로그인</Button>
        :
        <ButtonHover> 로그인</ButtonHover>
}

 

2) 여전히 복잡해서 기분나쁜 코드

- props로 받아서 스타일 컴포넌트 안에서 분기처리

-( color : 뒤에서 분기를 해주려고하니, 배경색에서도 또해줘야해서 일단 저렇게 통째로)

<LoginButton active={(id && password) ? true : false}> 로그인</LoginButton>

const LoginButton = styled.button`
  ${(props) => {
    if (props.active)
      return css`
      color: white;
      background-color: black;
      `;
    else
      return css`
        color: black;
        background-color: white;
      `
  }}
`

 

3) 좀 더 해봐... 

자바스크립트 때는 왜 더 편했지?

클래스를 주느냐 마느냐로 css 구현을 했었던 것 같은데..

 

과제 할 게 태산이라 더 하고 돌아와서 더 예쁘게 수정해보기로 한다.

 

4) 버튼의 비활성화 

깜빡하고 있었던게 버튼의 css가 아니라 비활성화 하라는 과제였다

<button disabled ={true}> 비활성 버튼 </button>

버튼에 disabled prop를 true 로 해주면 비활성화 된다고 한다!!

- 따라서 css도 이미 내려주는 disabled prop을 이용해 분기한다.

<LoginButton disabled={(id && password) ? false : true} >로그인</LoginButton>

const LoginButton = styled.button`
  ${(props) => {
    if (props.disabled)
      return css`
      color: black;
      background-color: white;
      `;
    else
      return css`
        color: white;
        background-color: black;
      `
  }}
`

 

 

엄청 오랜시간 이걸 했는데 충격적이게도 선택과제였다.

앞으로는 잘 보고 해야지... 필수 구현 먼저!

 

[Update :12/04 과제 해설 확인] 
과제 해설에서도 얼추 비슷하게 구현하고 있었다 -3-  나이스!
다만 로그인과, 회원가입 버튼도 공용으로 쓸수 있게 해주었다. 로그인 모드에따라 (isLoginMode state)

버튼에 text={ isLoginMode  ? "로그인: "회원가입"}  와 같이 text prop를 넘겨준다.

 

받는 input 갯수가 달라 난감해서 로그인과 회원가입을 하나로 구현하지 못했었는데.. 역시! 방법은 다 있었다ㅠ.ㅠ

버튼에 disabled ={ isLoginMode? !id || !password : !id || !password || !nickname}
disabled prop도 로그인 모드에따라 분기

(회원가입이면 id,password,nickname을 모두 확인한다.)

true, false 처리도 깔끔..센스있게.. 

빨간색 부분만 보면 id가 없거나 password가 없으면 true가 되어 disable 된다.

 

닉네임 인풋은 isLoginMode가 아닐때만 안그려주면 된다.
!isLoginMode  && (<input name=nickname />)

이렇게 ..  끝!