특저 상태나 조건에 따라 스타일을 다르게 지정해주는 경우가 많이 있다.
Styled-Component를 사용할때 컴포넌트에 특정 상태나 조건을 props로 내려주고 스타일을 조건에 따라 각각 수정해서 사용했다.

return css`` 를 사용해서 토글 만들기

간단한 토글을 만드는데 Styled-Component의 css를 사용 했을때와 안썻을때의 차이를 비교해 보자

완성된 토글

공통 code

import React, { useState } from 'react';
import styled, { css } from 'styled-components';

export default function Main() {
  const [state, setState] = useState(false);

  const toggleHandler = () => {
    setState(!state);
  };
  return (
    <Container>
      <ToggleContainer onClick={toggleHandler} state={state}>
        <div className="state">{state ? 'ON' : 'OFF'}</div>
        <div className="block"></div>
      </ToggleContainer>
    </Container>
  );
}

const Container = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  width: 100%;
  height: 100%;
`;

css 사용한 styled code

const ToggleContainer = styled.div`
  background-color: aliceblue;
  border-radius: 20px;
  width: 80px;
  height: 150px;
  position: relative;
  box-shadow: 0px 0px 0px 0px orange;
  cursor: pointer;
  transition: 0.3s;
  div.state {
    font-size: 24px;
    text-align: center;
    font-weight: 700;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    transition: 0.3s;
  }
  div.block {
    position: absolute;
    margin: 10px 0;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    background-color: lightgray;
    border-radius: 10px;
    width: 60px;
    height: 40px;
    transition: 0.3s;
  }

/* 스타일컴포넌트의 프롭스를 받아서 모든 스타일을 조건에 따라 변경할 수 있다!*/
  ${({ state }) => { 
    if (state) {
      return css`
        background-color: yellow;
        box-shadow: 0px 0px 100px 40px orange;
        div.state {
          color: red;
        }
        div.block {
          bottom: 90px;
          background-color: orange;
        }
      `;
    }
  }}
`;

css 사용하지 않은 styled code

동일한 프롭스에 따라 스타일을 달리하지만 각 항목마다 프롭스를 받아 변화를 주어야한다.

const ToggleContainer = styled.div`
  background-color: ${({ state }) => (state ? 'yellow' : 'aliceblue')};
  border-radius: 20px;
  width: 80px;
  height: 150px;
  position: relative;
  box-shadow: ${({ state }) =>
    state ? '0px 0px 100px 40px orange;' : '0px 0px 0px orange'};
  cursor: pointer;
  transition: 0.3s;
  div.state {
    font-size: 24px;
    text-align: center;
    font-weight: 700;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    transition: 0.3s;
    color: ${({ state }) => (state ? 'red' : null)};
  }
  div.block {
    position: absolute;
    margin: 10px 0;
    bottom: ${({ state }) => (state ? '90px' : '0px')};
    left: 50%;
    transform: translateX(-50%);
    background-color: ${({ state }) => (state ? 'orange' : 'lightgray')};
    border-radius: 10px;
    width: 60px;
    height: 40px;
    transition: 0.3s;
  }
`;

css를 최근에 알게 되었는데 그동안 코들르 얼마나 비효율 적으로 짠건지 모르겠다. 이제 더 가독성이 좋고 반복이 덜한 코드를 짤 수 있게 됬다.