초창기 Component Driven Development를 할 때 HTML, JavaScript, CSS코드가 분리되어 Shotgun Surgery를 할 수 밖에 없었는데, 차츰 JSX를 통해 JavaScript안으로 HTML이 흡수통합되는 방식으로 개선되게 되었다. 이 CSS-in-JS도 마찬가지로, 동떨어져 있던 CSS를 JavaScript안으로 흡수하기 위한 노력이다.
경쟁자들이 아주 많은데, 그 중에서 styled-components와 emotion을 주목했다. styled-components는 지배율이 압도적이고, emotion은 기능과 지원범위가 넓어 보였기 때문. 하지만 이는 2017년의 이야기였을 뿐, 결국 2020-11-20 시점에 이르러서는 서로가 서로의 기능들을 경쟁적으로 흡수하여 거의 비슷한 수준이라고 한다.
결론
- styled-components: 사용자들이 많기에 정보가 많다.
- emotion: 후발주자로서 좀 더 fancy한 문법에 좀 더 작고 빠르다.
- 서로 경쟁하다보니 지금에 와서는 서로 교체가 힘들지 않다.
2. See Also
2.1. Backlinks
- 2020-11-20
- CSS-in-JS
- styled-components
2.2. Similar Pages
Similar pages by cosine similarity. Words after page name are term frequency.
2.3. Adjacent Pages
Control
≤ 32
all
1.0x
1.0x
80
-120
ON
Metrics
Nodes(visible/total)0/0
Links(visible/total)0/0
Avg degree0.00
Depth coverage0
Queue(fetch/graph)0 / 0
Zoom(scale)1.00x
Ctrl/⌘ + Scroll: Zoom
Root
1-hop
2-hop+