기본 CSS 문제점

웹 문서의 스타일을 담당하는 CSS 문법은 작성하는 데에 있어서 몇몇 문제점이 있다.
1. 클래스명에 대한 고민.
2. 정해진 가이드가 없으면 구조가 복잡해짐.
3. 방대한 스타일 정보로 인한 파일의 크기.
이러한 문제점을 해결하기 위해 나온 문법으로 scss, styled-components가 출시되었다.

SCSS

• SASS 버전3에서 나온 SCSS 문법은 이전에 나왔던 SASS 문법과는 달리 기존 CSS 문법과의 호환성을 지키면서도 SASS 기능까지 활용할 수 있다.
• css preprocessing(css 전처리)로서, scss 문법으로 스타일 정보를 작성할시 컴파일러를 거쳐 css 문법으로 전환되는 과정을 거친다.
• 방대한 스타일 정보의 구조를 Nesting 기능을 활용하여 가독성있게 전환할 수 있으며 이외에도 다양한 기능을 갖고 있다.
• 변수를 활용하거나 Mixin 기능과 여러 selector 기능이 존재한다.
  but, 구조에 있어서 가독성이 보완되고 디버깅이 용이해졌지만 여전히 클래스명에 대한 고민 존재.

Styled-components

• 클래스명에 대해 고민하는 문제를 덜어주면서 기존의 컴포넌트라는 개념이 지니고 있는 재사용성이라는 장점 또한 갖고 있다.
• css 문법을 js 파일에 넣어 변수처럼 활용하면 컴파일 되었을때, html 태그별로 클래스명이 자동으로 부여된다.
• 컴포넌트의 속성인 props 기능을 활용할 수 있어, jsx에서 넘겨주는 값을 css 문법에서 활용 가능하다.
  but, 스타일 정보가 많아지거나 프로젝트의 규모가 커지면 js 파일 자체가 굉장히 방대해질 수 있어 또다시 가독성과 디버깅의 문제가 발생할 수 있다.

CSS in CSS, CSS in JS

scss

• css in css 문법은 기본적으로 js 파일과는 분리되어 있는 구조이기 때문에 어떤 컴포넌트의 상태값이 변하더라도 이에 반응하기 쉽지 않으며, 처음에 렌더링될 때에도 브라우저에 보이지 않는 컴포넌트까지 웹문서의 스타일 정보로 읽히기 때문에 불필요한 컴파일 과정이 추가된다.

styled-components

• css in js 방식이기에 해당 컴포넌트가 렌더링될 때에만 해당 스타일 정보를 읽는다. 이 부분이 장점처럼 보일 수 있지만 한편으로는 해당 컴포넌트가 렌더링 될 때마다 스타일 정보를 가져와야 한다는 의미이다.
• 만약, 굉장히 동적인 이벤트가 많은 웹사이트가 있다면 그만큼 컴포넌트의 상태값 전환도 활발하며, 컴포넌트 인터렉션이 활발할수록 자주 렌더링될 것이다. 그만큼 스타일 정보도 그때그때 다시 읽어와야 한다는 것이다. 그에 반해 css in css는 html문서에서 이미 읽혀져있는 상태이기 때문에 처음에는 스타일 정보를 가져오는 양이 많더라도 그 이후에 추가적인 렌더링은 상대적으로 적다.