[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

가장 근본인 차크라 유아이도 넣기..ㅎㅎ 

1. Panda CSS 

https://panda-css.com/

Panda CSS - Build modern websites using build time and type-safe CSS-in-JS

 

Chakra 팀에서 만든 Panda CSS 실제로 공식 독스에 들어가보면 판다 캐릭터가 반겨준다

2. vanilla-extract CSS

https://vanilla-extract.style/

vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.

제로 런타임을 강조하는 바닐라 CSS 

 

3. Shadcn UI

https://ui.shadcn.com/

shadcn/ui

라딕스 ui와 tailwind 기반의 샤드시엔 ui 도 오픈소스로 지원하고 있다.

 

4. Radix UI

https://www.radix-ui.com/

Radix UI

headless UI 를 지향하는 라이브러리입니다.

Radix UI Primitives 로

자체 스타일이 없어 개발자가 원하는 대로 스타일을 적용할 수 있다.

5. StyleX js

https://stylexjs.com/docs/learn/

Introduction | StyleX

Facebook에서 개발한 CSS in JS 라이브러리이다.

 

결국 Next.js 를 사용하면 하이드레이션(Hydration) 이슈가 많은데

이모션이나 스타일드로는 이 하이드레이션 이슈를 겪은 개발자들이 많은 피로도를 느꼈고,

이러한 제로 런타임, 그리고 서버 사이드 렌더링 지원, 타입 세이프 지원이 가능한지 등이

CSS 를 선택할 때 중요한 선택지로 불리게 된 것 이다.