💁🏼 왜 CSS in JS?

• CSS 클래스 명에 대한 고민
• 정해진 가이드가 없으면 구조가 복잡해집니다.
• 방대한 스타일 정보로 인한 스크롤 지옥도 여전합니다.
• 여전히 CSS클래스 조건부 스타일을 하고있습니다.
• CSS 클래스로 조건부 스타일링을 하더라도 동적인 변화를 표현하기에 한계가 있습니다.

😳그러면 인라인 스타일은 안될까요?

Inline Styles의 경우

• CSS 명시도(우선 순위)의 문제가 있습니다.
• 엄밀하게 CSS가 아닙니다.
• 문서의 구조를 명시하는 html 파일의 부피가 증가하고 CSS 파일과의 역할 분리가 모호해집니다. (CSS ⇒ 웹 문서의 스타일링 정보)
• Pseudo selector를 사용할 수 없습니다. (ex. :hover, :after)
• media query, key frame 또한 사용할 수 없습니다.

😆Solution: CSS를 JS에 싸서 드셔보세요!

<style>
.hash136s21 {
  background-color: black;
  color: white;
}
</style>

<p class="hash136s21">Hello CSS-in-JS</p>

• 클래스명을 해시값으로 자동 생성하고, 클래스명 오염 또한 방지합니다.
• CSS 문법을 온전하게 사용할 수 있습니다.
• 자바스크립트의 동적인 값들을 온전하게 사용할 수 있습니다.
• CSS-in-JS는 CSS를 문서(.css) 단위가 아니라 컴포넌트 단위로 추상화하여 적용하기에 알맞습니다.
  • 컴포넌트와 스타일이 하나의 파일로 결합되어 모듈화가 수월해집니다.
  • 무엇보다도 현대 웹은 컴포넌트를 기반으로 추상화의 단위를 구성하며 발전해나가고 있습니다.
  • Angular, React, Vue 등의 가장 인기 있는 SPA 프레임워크에서 컴포넌트를 빼놓고는 설명하기 힘들 정도로 중요한 개념을 차지하고 있다는 사실은 굳이 강조하지 않아도 충분하겠죠?

🔥왜 Styled Components를 고려해야 할까?

• css-in-js는 2018년 이후 폭발적으로 성장해왔습니다. 그 중 Styled-Components는 npm 다운로드 수 기준으로 현재 가장 인기 있는 css-in-js 라이브러리입니다.

💪🏻Getting Started

import style from 'styled-components'

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