[React] 2024 CSS 스타일의 패러다임
CSS 스타일의 패러다임이 최근 몇년간 굉장히 다채롭게 변화하고 있는데요.
tailwind 는 당연히 강력한 CSS in JS 로 많이 사용되고 있으며,
CSS 를 사용 할 때, CSS in JS 는 당연한 부분이고 여기에 추가로 TypeSafe CSS 로 관리하는 추세가 보인다.
여기에 제로 런타임인지, 확장 가능성이 있는지 등을 더 고려해 봐야 할 사항인것 같다.
0. Chakra UI
https://chakra-ui.com/docs/components
Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a
Simple, Modular and Accessible UI Components for your React Applications. Built with Styled System
v2.chakra-ui.com
가장 근본인 차크라 유아이도 넣기..ㅎㅎ
1. Panda CSS
Panda CSS - Build modern websites using build time and type-safe CSS-in-JS
Build modern websites using build time and type-safe CSS-in-JS
panda-css.com
Chakra 팀에서 만든 Panda CSS 실제로 공식 독스에 들어가보면 판다 캐릭터가 반겨준다
2. vanilla-extract CSS
https://vanilla-extract.style/
vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.
Zero-runtime Stylesheets-in-TypeScript.
vanilla-extract.style
제로 런타임을 강조하는 바닐라 CSS
3. Shadcn UI
shadcn/ui
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
ui.shadcn.com
라딕스 ui와 tailwind 기반의 샤드시엔 ui 도 오픈소스로 지원하고 있다.
4. Radix UI
Radix UI
Components, icons, and colors for building high‑quality, accessible UI. Free and open-source.
www.radix-ui.com
headless UI 를 지향하는 라이브러리입니다.
Radix UI Primitives 로
자체 스타일이 없어 개발자가 원하는 대로 스타일을 적용할 수 있다.
5. StyleX js
https://stylexjs.com/docs/learn/
Introduction | StyleX
StyleX is a simple, easy-to-use JavaScript syntax and compiler for styling web
stylexjs.com
Facebook에서 개발한 CSS in JS 라이브러리이다.
결국 Next.js 를 사용하면 하이드레이션(Hydration) 이슈가 많은데
이모션이나 스타일드로는 이 하이드레이션 이슈를 겪은 개발자들이 많은 피로도를 느꼈고,
이러한 제로 런타임, 그리고 서버 사이드 렌더링 지원, 타입 세이프 지원이 가능한지 등이
CSS 를 선택할 때 중요한 선택지로 불리게 된 것 이다.