styled-components : CSS-in-JS
scss : CSS-in-CSS
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-CSS인 scss나 css Modules을 사용하는 것인데 CSS-in-CSS를 사용하면서 class명이 충돌하는 문제를 해결할 수 있다.
필요에 따라 적절한 선택할 것
성능에 초점을 맞춘다면 CSS-in-CSS, 개발 생산성에 초점을 맞춘다면 CSS-in-JS를 사용하는 편이 낫다. 어떤 방식이 더 낫다고 단정할 수는 없으며, 서비스의 용도와 목적에 따라 적절한 선택이 필요하다.
가볍고 인터랙션이 별로 없는 정적인 서비스를 만든다면 어떤 방식을 선택하더라도 크게 무리는 없다. 인터랙션이 풍부하거나 페이지 하나가 포함하는 컴포넌트 수가 많은 경우에는 CSS Modules와 같은 CSS-in-CSS 방식으로 작업하기를 권장한다.
SCSS
css preprocessing으로, scss 문법으로 스타일 정보를 작성하면 컴파일러를 거켜서 css 문법으로 전환되어 적용된다.
장점
- CSS보다 심플한 표기법, CSS를 구조화하여 표현한다.
- 전처리가 추가된 css-in-css 기법으로 속도가 빠르다.
- Nesting, Mixin, selector등의 기능을 활용하여 CSS유지보수 편의성을 향상시킨다.
단점
- 별도의 파일로 만들어져야하기 때문에 재사용성이 떨어진다.
- css-in-css에 따른 가이드를 정해야 추후에 구조가 꼬이는 것을 막을 수 있다.(클래스명 규칙 명명 필요)
- 다시 컴파일 하는데 시간이 걸린다.
- 컴포넌트의 상태값에 따라 스타일을 바꾸기가 CSS-in-JS에 비해 상대적으로 어렵다.
Styled-components
컴포넌트 기반으로 CSS를 작성할 수 있게 도와주는 라이브러리
장점
- Scss라이브러리 설치 없이 Scss 문법을 사용할 수 있다.
- 기존의 컴포넌트에 따라서 재사용성을 활용할 수 있다
- CSS-in-JS 기법으로 한 파일에서 사용될 수 있고, 클래스명이 자동으로 부여된다
- 자유로운 CSS 커스텀 컴포넌트를 만들 수 있다.
- 컴포넌트의 props를 참조할 수 있으며, props의 값에 따라 스타일을 다르게 코딩 할 수 있다.
단점
- 스타일 정보가 많아지면 js파일이 방대해져 속도가 떨어지게된다.
- 동적인 이벤트가 많은 페이지라면 그만큼 속도가 느려지게 된다.
프론트엔드 개발자