Styled-Components

1. Styled-Components란?

과거에는 HTML, CSS, Javascript가 서로 분리되어 각자 파일로 저장되어 있었다.
그러나 React, Vue 등의 모던 자바스크립트 라이브러리로 인해 여러 block으로 나누는 component 위주의 개발이 도입되었다.

따라서 웹페이지를 HTML, CSS, Javascript에 따라 분리하는 것이 아니라 component를 기준으로 분리하고, 각 component에 HTML, CSS, Javascript를 모두 넣는 형태가 등장하였다.
React는 JSX를 사용하기 때문에 이미 Javascript와 HTML이 묶여있고, 따라서 여기에 CSS를 넣어주면 된다.

Styled-Components는 CSS를 Javascript에 넣어주는 라이브러리 중 하나이다.
자동으로 해당 페이지의 component에 렌더링되고, 삭제 또한 용이하다는 장점이 있다.

2. 설치 방법 및 기본 예제

npm 또는 yarn을 이용하여 설치가 가능하다.

npm install --save styled-components
yarn add styled-components

다음은 기본적인 styled-components의 예제이다.
Title component가 h1 태그이며 어떤 스타일인지 정의되어 있다.
마찬가지로 Wrapper component는 section 태그이며 어떤 스타일인지 정의되어 있다.
이렇게 스타일과 태그가 정의된 두 개의 component를 렌더링하면 해당 스타일이 실제로 적용됨을 확인할 수 있다.

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

3. props를 활용한 예제

styled-components는 props를 이용하여 스타일을 씌울 수도 있다.

다음은 props를 이용한 예제이다.
Button component는 button 태그이며 스타일이 정의되어 있는데, 스타일이 정의된 부분에 삼중연산자를 넣어 props가 primary를 가지고 있다면 background는 palevioletred, 그렇지 않다면 white로 설정되어 있는 것을 확인할 수 있다.
실제로 해당 코드를 실행하면 props가 주어질 때와 주어지지 않을 때 버튼의 스타일이 다르게 렌더링되는 것을 확인할 수 있다.

const Button = styled.button`
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

render(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);

4. extending styles

Styled-components는 기존 component에 스타일을 확장하는 것도 가능하다.

다음은 extending styles에 대한 예시이다.
Button component는 button 태그이며 스타일이 정의되어 있다.
TomatoButton component는 styled(Button)으로 정의되어 있는데, 이는 Button component의 속성을 그대로 가져오고 TomatoButton component의 스타일을 추가로 정의한 것이다. (override)

const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

render(
  <div>
    <Button>Normal Button</Button>
    <TomatoButton>Tomato Button</TomatoButton>
  </div>
);

5. animations

이외에도 animations도 styled-components를 이용해 구현할 수 있다.

다음은 animations에 대한 예시이다.
rotate에 keyframes를 만든 뒤, div 태그로 정의된 Rotate component의 스타일에 rotate를 사용하여 animations을 구현하였다.

const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`;

const Rotate = styled.div`
  display: inline-block;
  animation: ${rotate} 2s linear infinite;
  padding: 2rem 1rem;
  font-size: 1.2rem;
`;

render(
  <Rotate>&lt; 💅🏾 &gt;</Rotate>
);

참고

https://styled-components.com/
https://www.daleseo.com/react-styled-components/
https://dkje.github.io/2020/10/13/StyledComponents/