[React] styled-components 조건부 렌더링

🔍 styled-components 에서 조건부 렌더링 하는법

export const CameraWraaper = styled(CameraComponent)`
  ${(props) =>
    props.id === 'FoupStocker' &&
    css`
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      margin-bottom: 10px;
    `}
  ${(props) =>
    props.id === 'Etching' &&
    css`
      grid-column: 7 / 8;
      grid-row: 1 / 2;
      margin-bottom: 10px;
    `}
    ${(props) =>
    props.id === 'Cleaning' &&
    css`
      grid-column: 1 / 2;
      grid-row: 2 / 3;
      margin-top: 100px;
    `}
    ${(props) =>
    props.id === 'Photo' &&
    css`
      grid-column: 7 / 8;
      grid-row: 2 / 3;
      margin-top: 100px;
    `}
`;

✔ 조건부 렌더링을 할 때는 css를 import 해와야한다!

css : 복잡한 조건부 스타일링이나 다른 CSS 규칙을 컴포넌트에 동적으로 적용하고자 할 때 유용하며, 프로퍼티에 따라 조건부 스타일링을 훨씬 편리하게 할 수 있습니다.

🍉 작성법

${(props) => 조건 && css`해당 조건에 넣을 style`}

으로 작성하면 된다!