최근 FE의 생태계의 움직임 (feat. Next/React, Tailwind)

테일윈드 기반 UI 컴포넌트 라이브러리 - Tailframes

 

위 라이브러리가 있는 것을 보고 생각이 든 점이 요즘 CSS-in-JS 즉 Styled-components나 emotion 같은 CSS는 지양되고 있습니다.

런타임 시 실행되고, 번들 사이즈 증가 등 오버헤드 관련 문제가 있는데 아무래도 FE 생태계를 꽉 잡고 있는 Next.js가 테일윈드를 권장하고 있기 때문입니다. 공식문서 예제를 보더라도 테일윈드로 되어 있고 아무래도 SSR과 서버 컴포넌트 사용 관점에서 스타일을 적용하기 힘들다는 점이 제일 크죠.

 

그래서 테일윈드 기반으로 편리하게 많이 사용되고 있는 것 같습니다. 물론 vanilla extract css와 같이 Zero-runtime 방식이 있긴 한데

아직은 Next에서 클라이언트 컴포넌트만 사용 가능하다는 한계가 있네요. 요즘 React 18의 동시성 모드가 나오고 Next가 이에 적용하여

RSC(React Server Components)를 도입하면서 렌더링 최적화, 병렬 라우팅 등 다양한 기능들을 선보이고 있는데 한번 주목해볼만 합니다.

 

참고