| 특징 | 장점 | 단점 | |
|---|---|---|---|
| CSS | 기본적인 스타일링 방법 | - | 일관된 패턴을 갖기 어려움, !important의 남용 |
| SASS(preprocessor) | 프로그래밍 방법론을 도입하여 컴파일된 css를 만들어내는 전처리기 | 변수/함수/상속 개념을 활용하여 재사용 가능, css의 구조화 | 전처리 과정이 필요함, 디버깅이 어려움, 커뮤파일한 css 파일이 비대해짐 |
| BEM | css 클래스 작성에 일관된 패턴을 강제하는 방법론 | 네이밍으로 문제 해결, 전처리 과정 불필요 | 선택자의 이름이 지나치게 길어지고 클래스 목록이 너무 많아짐 |
| Styled-Componenet(CSS-in-JS) | 컴포넌트 기반으로 css를 작성할 수 있게 도와주는 라이브러리 | css를 컴포넌트 안으로 캡슐화(encapsulation) 시킬 수 있음, 네이밍이나 최적화를 신경쓸 필요가 없음 | 페이지를 빠르게 로딩하는 것에 불리함 |
Styled Component의 특징
-
Automatic critical CSS
Styled Component는 화면에 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입한다. 따라서 코드를 적절히 분배해 놓으면 사용자가 어플리케이션을 사용할 때 최소한의 코드만으로 화면을 띄울 수 있다.
-
No class name bugs
Styled Component는 스스로 유니크한className을 생성한다. 이는className의 중복이나 오타로 인한 버그를 줄여준다.
-
Easier deletion of CSS
기존에는 더 이상 사용하지 않거나 삭제한 컴포넌트에 해당하는 스타일 속성을 제거하기 위해 CSS 파일 안의className을 이리저리 찾아야 했다. 하지만 Styled Component는 모든 스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에 만약 컴포넌트를 더 이상 사용하지 않아 삭제할 경우 이에 대한 스타일 속성도 함께 삭제된다. -
Simple dynamic styling
className을 일일이 수동으로 관리할 필요 없이 React의 props나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하기 때문에 간단하고 직관적이다. -
Painless maintenance
컴포넌트에 스타일을 상속하는 속성을 찾아 다른 CSS 파일들을 검색하지 않아도 되기 때문에 코드의 크기가 커지더라도 유지보수가 어렵지 않다. -
Automatic vendor prefixing
개별 컴포넌트마다 기존의 CSS를 이용하여 스타일 속성을 정의하기만 하면 된다. 이외의 것들은 Styled Component가 알아서 처리해 준다.
