styled component 및 css-in-js에 대하여

styled component에 대해서는 이전 회사에서 익히 들었었지만 한 번도 적용하지 않았던 부분이다. 그렇게 잊고 살다가 우연히 스켈레톤 ui의 예시를 보며 styled component 사용을 확인하였고, 간단하게나마 한 번 정리해 보고자 한다.

---

 

styled-component에 대하여 검색을 하다보면 CSS-in-JS라는 말을 쉽게 접할 수 있다. 스타일드 컴포넌트에 대하여 알아보기 전 CSS-in-JS의 개념부터 정리해보자.

CSS-in-JS

CSS-in-JS는 직관전인 의미 그대로 JS 안에서 CSS를 작성하겠다는 뜻이다. TMI로 2014년 facebook 개발자인 Vjeux가 이러한 방법으로 문제를 해결한 방식을 발표하였으며, 이후 개념이 확립/정립되며 많은 라이브러리가 등장하게 되었다. 이렇게 등장하게 된 라이브러리 중에 가장 유명한 라이브러리가 바로 Styled-components 이다.

Vjeux가 발표한 CSS의 어려움 및 CSS-in-JS로 해결한 이슈들은 다음과 같다. (Solved Without Hacks)

• Global Namespace : 글로벌 네이밍
• Dependencies : CSS간의 디펜던시
• Dead Code Elimination : 미사용 코드 제거
• Minification : 클래스 이름의 압축
• Sharing Constants : JS <-> CSS간 상태 공유
• Non-Deterministic Resolution : CSS 로드 순서 해결
• Isolation : 상속에서의 격리

https://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html

Vjeux » React: CSS in JS – NationJS

 

[ + CSS-in-CSS]

CSS-in-CSS는 CSS를 모듈화하여 사용하는 방법을 의미한다. css에서는 class 생성 시, 자동으로 고유한 글로벌 네임을 만들고 이를 지역적으로 제한한다. CSS 모듈은 동일 프로젝트 소스 안에 css class 이름이 중복되어도 자동으로 고유한 네이밍을 하기 때문에 중복과 관리의 위험성이 적다. 

 

자, styled components가 CSS-in-JS를 쉽게 활용할 수 있는 라이브러리임을 이제 알았다. 그러면 어떠한 장점이 있길래 사람들은 이 라이브러리를 사용하는 것일까?

styled components 장점

• Automatic critical CSS : styled-components는 랜더링 되는 컴포넌트를 추정하여 해당 부분에만 자동적으로 스타일을 삽입한다. 고로 사용자는 최소한의 필요 코드만 로드하게 된다.
• No claa name bugs : styled-components는 유니크한 class name을 만들기 때문에 중복/덮어씌임/오타 등의 걱정이 없다.
• Easier deletion of CSS : 일반적인 코드에서는 class name이 어디에서 사용하는지 정확히 파악하기 어렵다. 그러나 styled-components는 class가 사용되던 컴포넌트가 더이상 사용되지 않거나 삭제되었을 때, 스타일도 함께 삭제한다.
• Simple dynamic styling : 수십 개의 class를 수동으로 관리 할 필요 없이 props 또는 전역 테마를 기반으로 스타일을 적용하기 때문에 상당히 심플하게 사용할 수 있다.
• Painless maintenance : 컴포넌트에서 스타일에 영향을 미치는 부분을 찾기 위해 여러 파일을 검색할 필요가 없어 아무리 거대한 코드 베이스를 가지고 있더라도 유지 관리가 쉽다.
• Automatic vendor prefixing : css를 표준으로 작성하면 나머지는 styled-components가 자동으로 처리한다.

 

https://styled-components.com/docs

styled-components: Documentation