styled-components 와 emotion 중에 사용할 css-in-js 를 골라야하는데 css 만 써본 나로써는 왜 써야하는지에 필요성을 느끼지 못했다. 그래서 왜 써야 하는지에 대한 이해가 필요하고, 프로젝트를 사용하기 위해 css-in-js 를 알아보기로 하자.
CSS-in-JS가 뭔가요?
이름에서 알 수 있듯이 CSS-in-JS를 사용하면 자바스크립트 또는 타입스크립트 코드에서 직접 CSS를 작성하여 리액트 컴포넌트 스타일이다.JS를 CSS로 전환하는 고성능 컴파일러로, 런타임 및 서버 사이드에서 작동합니다. 이 코어 라이브러리는 낮은 레벨이며, 프레임워크에 구애받지 않는다.
즉. 리엑트에서 "컴포넌트css" 를 작성하기 위해서 사용한다. 풀어 얘기하자면 style을 가지고있는 태그 를 컴포넌트화 시켜서 좀더 가독성과 사용성 측면에서 이득이 될수있다.
그럼 실무에서는 왜 css-in-js를 사용하게 되었을까 ?
아래에 css 스타일 폴더 구조를 보자
각 폴더 마다 잘정리 되어있기는 하지만 엄청난 양의 css 를 분리해서 작성한다.
프로젝트 당시에는 상관없지만, 시간이 지나면 어디에다가 해당 css를 작성했는지 모호해 지게된다. 때문에 css-in-js 를 사용한다고 생각된다.
인라인 스타일이 동작하는 방법
const textStyles = {
color: white,
backgroundColor: black
}
<p style={textStyles}>inline style!</p>브라우저에서 DOM 노드를 다음과 같이 연결
<p style="color: white; backgrond-color: black;">inline style!</p>CSS-in-JS이 동작하는 방법
import styled from 'styled-components';
const Text = styled.div`
color: white,
background: black
`
<Text>Hello CSS-in-JS</Text>브라우저에서 DOM 노드를 다음과 같이 연결
<style>
.hash136s21 {
background-color: black;
color: white;
}
</style>
<p class="hash136s21">Hello CSS-in-JS</p>CSS-in-JS의 장점
CSS의 컴포넌트화로 스타일시트의 파일을 유지보수 할 필요가 없다. CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화한다 (모듈성)
CSS-in-JS는 JavaSript 환경을 최대한 활용 할 수 있다
JavaScript와 CSS 사이의 상수와 함수를 쉽게 공유 할 수 있다
현재 사용중인 스타일만 DOM에 포함한다.
CSS-in-JS는 짧은 길이의 유니크한 클래스를 자동으로 생성하기 때문에 코드 경량화의 장점이 있다
CSS-in-JS의 단점
러닝 커브
새로운 의존성
별도의 라이브러리를 설치해야 하므로 번들 크기가 커진다
인터랙션한 페이지일 경우 CSS 파일을 따로 관리하는 방법에 비해 느린 성능을 보여줄 수 있다.
그렇다면 이제부터 js-in-css 에서 유명한 라이브러리인 styled-component 와 emotion에 대해서 알아보도록 하자
제공하는 기능 비교
| library | Attaching Props | Media Queries | Global Styles | Nested Selectors | Server Side Rendering | Theming Support | Composition |
|---|---|---|---|---|---|---|---|
| styled-components | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| emotion | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
styled-components 와 emotion 을 보면 둘다 제공하는 기능이 거의 비슷하다 때문에 둘중 어느것을 사용해도 손쉽게 다른쪽을 이용할수있다. 그렇다면 트렌드를 비교해보자. styled-component 의 다운로드 수가 emotion 보다 훨씬높다. 다른것보다 스탯 창을 보면 최근 업데이트를 보면 emotion은 3년전, styled-componet는 14시간전이다,때문에 styled-componet 가 지속적으로 해당 라이브러리를 관리하고 있다고 생각되기에 나는 styled-component 를 프로젝트에 사용할 계획이다.
https://npmtrends.com/@emotion/core-vs-styled-components
발췌 :
https://d0gf00t.tistory.com/22 - CSS-in-JS에 관해 알아야 할 모든 것
https://junghan92.medium.com/%EB%B2%88%EC%97%AD-%EC%9A%B0%EB%A6%AC%EA%B0%80-css-in-js%EC%99%80-%ED%97%A4%EC%96%B4%EC%A7%80%EB%8A%94-%EC%9D%B4%EC%9C%A0-a2e726d6ace6 - 우리가 CSS-in-JS와 헤어지는 이유
https://jongminfire.dev/css-in-js - CSS-in-JS
