CSS 문제점

• 웹 문서의 스타일을 담당하는 CSS 문법은 작성하는 데에 있어서 몇몇 문제점이 있었다.

  1. 클래스명에 대한 고민
  2. 정해진 가이드가 없으면 구조가 복잡해집니다
  3. 방대한 스타일 정보로 인한 파일의 크기

• 이런 배경으로 문제점을 해결하기 위해 나온 문법으로 scss, styled-components 출시되었다.

SCSS

• SASS 버전3 에서 나온 SCSS 문법은 이전에 나왔던 SASS 문법과는 달리 기존 CSS 문법과의 호환성을 지키면서도 SASS 기능까지 활용할 수 있었다.
• css preprocessing(전처리)로서, scss 문법으로 스타일 정보를 작성할시 컴파일러를 거쳐 css 문법으로 전환되는 과정을 거친다.
• 방대한 스타일 정보의 구조를 Nesting 기능을 활용하여 가독성있게 전환할 수 있으며
  이 외에도 여러 기능을 갖추고 있다.
• 예시

/*적용 전*/
login-container {
	display: flex;
	justify-content: center;
  align-items: center
}

button {
  width: 200px;
	height: 100px;
	background-color: blue;
}

button:hover {
	background-color: red;
	cursor: pointer; 
}

input {
	background-color: blue;
}

input:focus {
  background-color: red;
}

/*적용 후*/
$theme-color: blue;

%flex-center {
	display: flex;
	justify-content: center;
  align-items: center
}

login-container {
  @extend flex-center;
	button {
	  width: 200px;
		height: 100px;
		background-color: $theme-color;
		&:hover {
			background-color: red;
			cursor: pointer;
		}
	}
	input {
		background-color: $theme-color;
		&:focus {
		  background-color: red;
		}
	}
}

• 이 처럼 변수를 활용하거나 Mixin 기능과 여러 selector 기능이 존재한다.
• 구조에 있어서 가독성이 보완되고 디버깅이 용이해졌지만 여전히 클래스명에 대한 고민은 존재한다.

Styled-components

• 해당 문법은 우선 클래스명에 대해 고민하는 문제를 덜어준다.
  그리고, 기존의 컴포넌트라는 개념이 지니고 있는 재사용성이라는 장점 또한 갖추고 있다.
• 예시

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

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

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

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

추가 비교 : 두 문법의 성능에 대해여

scss

• styled-components가 만들어진 배경에 대해 안다면, 해당 문법의 장단점 또한 이해하기 쉬울 것이다.
• css in css 문법은 기본적으로 js 파일과는 분리되어 있는 구조이다. 그렇기 때문에 어떤 컴포넌트의 상태값이 변하더라도 이에 반응하기 쉽지 않으며, 처음에 렌더링될 때에도 브라우저에 보이지 않는 컴포넌트까지 웹문서의 스타일 정보로 읽히기 때문에 불필요한 컴파일 과정이 추가된다.

styled-components

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

참고 사이트
bono's blog : css in js
css/styled-components 성능 비교