scss, styled-components 비교
이번에 들어가게된 프로젝트에서 styled-components와 scss 중 어떤 것을 선택해야할지 논의하는 주제가 있어서 정리해본당
우선 styled-components와 scss의 제일 큰 차이점은 css-in-js, css-in-css라고 생각한다.
그래서 일단 이 둘의 차이점을 먼저 정리해보겠다.
CSS-in-CSS, CSS-in-JS
JS를 주로 다루는 프론트엔드 개발자들은 CSS 또한 다뤄야하는 역량이 필요하게 되었는데, 이를 통해 기존에는 css파일로 따로 작업했던 것들의 불편함을 느끼게 되면서 CSS-in-JS 개념이 도입되었다.
CSS-in-CSS의 단점
- Global namespace : css파일에 css를 작성하면 모든 스타일이 global에 선언되어 별도의 class 명명 규칙을 사용해야 한다.
- Dependencies : css간의 의존관계를 관리하기가 힘들다.
- Dead Code Elimination : 지속적인 리팩토링 과정에서 엮여있는 css 코드를 드러내기 어려운 점
- Minification : 클래스 이름의 최소화 문제
- Sharing Constants : JS의 상태 값을 공유할 수 없는 것
- Non-deterministic Resolution : CSS 로드 순서에 따라 스타일 우선 순위가 달라지는 것
- Isolation : CSS와 JS가 분리되어 생기는 상속에 따른 문제
라는 것들이 있다고 한다!
여기서 CSS-in-JS를 도입하면 위의 문제들이 모두 해결된다. 심지어 글로벌 네임스페이스 문제 같은 경우는 해시값으로 바꿔주기 때문에 덤으로 같이 해결된다.
그리고 JS파일과 같이 사용되기 때문에 컴포넌트 단위로 CSS가 사용될 수 있다.
그렇다면 CSS-in-JS의 단점은 어떤 것이 있을까?
CSS-in-JS의 경우 별도의 라이브러리 추가를 하기 때문에 번들 사이즈의 크기가 커진다. 즉, JS가 모두 로딩된 후에 CSS 코드가 생성되어 다운로드 시간이 길어진다.
그리고 인터랙션이 늦어진다. CSS-in-JS를 사용하면 인터랙티브한 웹페이지의 성능을 떨어트린다.
CSS-in-JS의 단점을 커버하는 것은 CSS-in-CSS을 사용하는 것이지만, 여기엔 scss나 css Modules를 사용하는 방법이 있다.
이렇게 되면 CSS-in-CSS를 사용하면서 class명이 충돌하는 문제를 해결할 수 있다.
결론 정리
성능에 초점을 맞춘다면 CSS-in-CSS, 개발 생산성에 초점을 맞춘다면 CSS-in-JS를 사용하는 편이 낫다. 어떤 방식이 더 낫다고 단정할 수는 없으며, 서비스의 용도와 목적에 따라 적절한 선택이 필요하다.
가볍고 인터랙션이 별로 없는 정적인 서비스를 만든다면 어떤 방식을 선택하더라도 크게 무리는 없다. 다만, 인터랙션이 풍부하거나 페이지 하나가 포함하는 컴포넌트 수가 많은 경우에는 Styled Components와 같은 CSS-in-JS 방식이 아닌, CSS Modules와 같은 CSS-in-CSS 방식으로 작업하기를 권장한다.
SCSS
css preprocessing으로, scss 문법으로 스타일 정보를 작성하면 컴파일러를 거켜서 css 문법으로 전환되어 적용된다.
전처리가 추가된 css-in-css 기법으로 속도가 빠르다. 하지만 별도의 파일로 만들어져야하기 때문에 재사용성이 떨어진다.
또한 scss를 사용하게 되면 css-in-css에 따른 가이드를 정해야 추후에 구조가 꼬이는 것을 막을 수 있다.(클래스명 규칙 명명 필요)
컴포넌트의 상태값에 따라 스타일을 바꾸기가 CSS-in-JS에 비해 상대적으로 어렵다.
Styled-components
가장 큰 장점은 기존의 컴포넌트에 따라서 재사용성을 활용할 수 있다는 점이다.
CSS-in-JS 기법으로 한 파일에서 사용될 수 있고, 클래스명이 자동으로 부여된다.
하지만 스타일 정보가 많아지면 js파일이 방대해져 속도가 떨어지게된다.
동적인 이벤트가 많은 사이트라면 그만큼 속도가 느려지게 된다.
Emotion
emotion.js는 styled-components와 마찬가지로 CSS-in-JS의 종류 중 하나이다.
사용법은 styled-components와 같지만, 용량은 더욱 가볍다.
styled-components에서는 개발자가 동일한 이름 지정 스타일을 피하도록 고유한 이름을 만들어야하지만, emotion의 경우 css props로 의존하기 때문에 네이밍 작업이 매우 간단하다. css 작성을 위한 객체 스타일을 쉽게 다룰 수 있따.
emotion은 작은 용량에 고성능, 유연성을 가지고 있어 개발자들이 styled-components보다 더 선호한다.
작은 용량이지만 사실 emotion, styled-components 둘이 비교했을 때 성능이나 번들 크기는 거의 차이가 없었다구…에잇