TIL : Styled-Components

Pure CSS를 사용하다가 Sass를 처음 사용했을 때 그 편리함에 무척 감동했던 기억이 있다. 특히 nesting이 되는 점이 정말 혁신적이었다. 특정 태그에만 원하는 스타일을 주기 위해 불필요한 클래스네임을 짓고, 상위 태그의 클래스네임을 반복적으로 써야하는게 무척 귀찮았는데 그 수고를 거의 반 이상 줄일 수 있었기 때문이다. 그러나 이 편리한 Sass에도 한계가 있긴 했다.

• CSS 클래스 명에 대한 고민은 여전하다는 것
  • ex. BEM (.block__element--modifier, button button--state-success)
• 정해진 가이드가 없으면 구조가 복잡해진다는 것.
• 방대한 스타일 정보로 인한 스크롤 지옥도 여전함.
• 여전히 CSS 클래스로 조건부 스타일링을 한다.
• CSS 클래스로 조건부 스타일링을 하더라도 동적인 변화를 표현하기에 한계가 있다.
  ex. 1초에 px 값을 1씩 증가 → Inline 스타일에 의존

이 문제들의 해결 방법은 css-in-js다. 스타일을 JS에서 적용하는 것이다. css-in-js 라이브러리가 여러 개 있지만 그 중에서 요즘 가장 인기있는 것이 바로 Styled-Components다.

아니, 잠깐. 일단 css-in-js가 뭐가 좋은데?

• 클래스명을 해시값으로 자동 생성하고, 클래스명 오염 또한 방지한다.
• CSS 문법을 온전하게 사용할 수 있다.
• 자바스크립트의 동적인 값들을 온전하게 사용할 수 있다.
• CSS-in-JS는 CSS를 문서(.css) 단위가 아니라 컴포넌트 단위로 추상화하여 적용하기에 알맞다.

Sass나 CSS를 사용해서 스타일을 줄 때 동적인 값으로 조절하려면 서로 다른 스타일의 CSS 클래스명을 자바스크립트로 바꿔주는 방식을 사용했다. 하지만 Styled Components는 자바스크립트로 만들기 때문에 직접 변수로 제어할 수 있다. 리액트 컴포넌트인만큼 props로 값을 받는다.

이러한 장점들로 인해 요즘 Styled-Components의 인기가 높아지고 있다. 전 회사에서도 새 프로젝트를 위해 리액트를 세팅하면서 Styled-Components를 사용했었다. 사용법은 의외로 크게 어렵지 않다.

공식문서에서 가장 기본 예제를 확인해보자

// Create a Title component that'll render an <h1> tag with some styles

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

// Create a Wrapper component that'll render a <section> tag with some styles

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

// Use Title and Wrapper like any other React component – except they're styled!
render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

참조: https://blog.nerdfactory.ai/2019/10/25/react-styled-components.html