[CSS] Styled-Component

이제 유튜브 예시를 통해 스타일드 컴포넌트를 적용해보려고 한다.

스타일드 컴포넌트가 적용되어있으며 지원이 안되는 Mixin 기능을 사용하기 위해 따로 변수를 선언했다. 또한 props로 동적변환도 해보았다.

• useState를 사용해 다크모드 > 화이트모드로 전환되는 기능도 추가했다.

App

가장 메인이 되는 App의 리턴문부터 살펴보겠다.

function App() {
  const [darkMode, setDarkMode] = useState(true);
  return (
    <Container>
      <GlobalStyle darkMode={darkMode} />
      <Header setDarkMode={setDarkMode} />
      <Nav />
      <Tab />
      <StyledMain>
        {contents.map((el) => (
          <Content key={el.id} content={el} />
        ))}
      </StyledMain>
    </Container>
  );
}

• 대부분 스타일드 컴포넌트로 이루어져있는 것을 볼 수 있다.
• App을 제외한 모든 컴포넌트들은 따로 파일로 분리되어있다.
• 다크모드를 위해 state를 선언했다.

App의 스타일드 컴포넌트를 보기 전에 Mixin처럼 스타일들을 변수에 저장한 페이지부터 봐야할 필요가 있다.

styled

import { css } from "styled-components";

export const flexMixin = ({
  direction = "row",
  align = "stretch",
  justify = "start",
  gap = 0,
  wrap = "nowrap",
}) => {
  return css`
    display: flex;
    flex-direction: ${direction};
    align-items: ${align};
    justify-content: ${justify};
    gap: ${gap};
    flex-wrap: ${wrap};
  `;
};

export const gap_padding_radius = "20px";

우선

import { css } from "styled-components";

여기서의 css란 리액트에서 css 코드를 작성하기 위한 헬퍼함수 주로 css 코드블록을 정의할 때 사용한다. 템플릿 리터럴을 사용하여 css를 작성할 수 있다.
한마디로 css 뒤에 ``를 쓰며 css 코드 쓰겠다고 리액트에게 바로 알려준다고 생각하면 된다.

• flexMixin 변수안에 스타일 속성을 작성하고 그 값을 고유한 변수명으로 만들어 파라미터에서 기본값을 설정했다. 다른곳에서 이 변수를 호출하고 파라미터를 값을 넣어주면 기본값 대신 그 값을 적용한다.
• ' gap_padding_radius' 처럼 단순 변수로 만들어줘도 된다.

이제 App 페이지로 돌아가서

const Container = styled.div`
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-template-rows: 80px 40px 1fr;
  width: 100vw;
  height: 100vh;
`;

const StyledMain = styled.main`
  width: 100%;
  padding: ${gap_padding_radius};
  ${flexMixin({ align: "flex-start", wrap: "wrap" })}

  section {
    width: 50%;
    height: auto;
    padding: 10px;

    & > img {
      width: 100%;
      border-radius: 10px;
    }
    & > div {
      ${flexMixin({ gap: "10px" })}
      @include flex(row, $gap: 10px);
      padding-top: 10px;
    }

    div {
      img {
        width: 30px;
        border-radius: 100%;
      }

      p:first-child {
        font-weight: 600;
      }
      p:last-child {
        font-size: 0.9rem;
        color: gray;
      }
    }
  }
`;

const GlobalStyle = createGlobalStyle`
::-webkit-scrollbar {
  display: none;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: background-color 0.2s;
}

${(props) =>
  props.darkMode === true
    ? css`
        * {
          background-color: black !important;
          color: white;
        }

        svg {
          fill: white;
        }

        form {
          button {
            background-color: #626262 !important;
          }
        }

        form div svg {
          background-color: #626262;
        }

        section ul li {
          background-color: #323232 !important;
          &:first-child {
            background-color: #626262 !important;
          }
        }
      `
    : ""}
`;

• 순서대로 스타일드 컴포넌트를 만든 것을 볼 수 있다. (리턴문에 그대로 선언)
• SCSS의 문법중 중첩태그와 부모선택자는 스타일드에서 사용할 수 있다.
• 'createGlobalStyle'은 전역에 스타일을 적용해주는 라이브러리이다.
• darkMode state를 만들어 Header 컴포넌트에 props로 전달하고 있다.
• Header 컴포넌트에서 버튼을 눌러 state에 false를 전달하면 GlobalStyle라는 전역변수 스타일드 컴포넌트에서 darkMode를 props로 받아 boolean을 판단해서 다크모드 스타일을 적용한다.

모든 컴포넌트들의 위와 같이 작동되고 있다.

회고: 복잡하다.. 어려운건 아닌데 구조 잘 알아야할 것 같다. props는 좀 헷갈리긴 하는데 많이 쓰면 될 것 같다.