들어가면서
shadcn ui는 radix-ui + tailwind(css)를 결합한 재사용성 ui 컴포넌트이다.
shadcn ui를 사용하는 이유중 하나는 css 커스텀이 온전히 개발자가 컨트롤 할수 있기 때문인 이유가 있다고 생각한다.
그러므로 shadcn ui를 사용하기에 앞서서 shadcn/ui의 util 함수인
cn 함수를 한번 차근차근 알아가보고자 한다.
tailwind
그렇지만 그전에 next에서는 tailwind를 기본 옵션으로 설정 할수 있게 할까??
CSS in Js
css-in-js는 js를 통해 css를 생성함으로서 기존 selector 기반 css에서 생길 수 있는 문제들,
- naming이 겹치거나,
- 의도치 않게 전역적으로 css가 먹히거나,
- css 로드 순서에 따라 우선순위가 달라지는 문제
등이 있다.
이러한 문제를 js 내부에서 선언하여 컴포넌트 단위로 적용하고 class name을 자동 생성하여 해결한다.
CSS in JS 구현방식
대부분의 css in js 라이브러리들은 자바스크립트의 runtime 때 실행되는 js bundle에 포함되어 css를 정의하는 방식인데
이러한 방식으로 단점이 존재한다.
- js bundle 용량이 증가 : 스타일 코드와 라이브러리 런타임 코드가 클라이언트로 전달되어야 한다 .
- 페이지 렌더링 시간 증가 : JS에 작성된 css코드를 구문 분석하고 동적으로 추가하면서 Scripting 시간이 증가
물론 이런 단점이 있긴 하지만 장점으로 얻는 개발용이성이 크기에 react와 함께 유행했다고 생각한다.
그러나 CSR환경을 바탕으로 두고 궇상한 방법이기에 SSR 환경에서 문제가 나타난다.
SSR에서의 CSS in JS
기본적으로 SSR에서 CSS-in-JS 라이브러리를 react처럼 그대로 사용하면 hydrate 이전 서버에서 받아오는 html에 스타일이 전혀 적용되지 않아서, 잠깐의 텀이지만 날 것 그대로의 html이 나타나는 문제가 있다.
때문에 초기 HTML에 포함되는 요소에 대한 CSS를 서버쪽에서 사용할 수 있도록 처리가 필요하다.
쉽게 이해해보자면, 정적(SSR)으로 생성되는 요소의 CSS만 추출해서 HTML에 적용하도록 해야한다.
그렇기에 CSS In JS 라이브러리인 styled-component를 지양한다.
tailwind css
tailwind css는 utility css로 class name을 컴포넌트가 아니라 기능에 붙임으로 css 문제를 해결한다.
tailwind는 내부적으로 유틸리티 클래스를 생성하여 사용하며 코드 내에서 css를 사용하면 이 유틸리티 클래스들에서 해당 css를 가져와 사용하는 방식으로 동작하게된다.
tailwind 내부적으로 사용하는 purgeCSS는 사용하지 않는 css들을 알아서 제거해 주며 이이를 통해 수많은 유틸리티 클래스들의 용량을 줄여 빌드타임을 빠르게 만들어주는 핵심적인 역할을 한다. 이를 통해 번들 크기에 주는 영향을 줄일 수 있다.
SSR 관점에서 중요한 런타임에 스타일시트를 생성하지 않고 빌드 타임에 스타일시트를 가져오는 방식이라는 점 때문에 SSR에서도 추가적인 설정 없이 작동 할 수 있고
bootstrap과 유사하지만 tailwind에서는 애매한 픽셀과 같은 경우 p-[589px]와 같이 사용할 수 있게 개발자의 편의성을 도와준다.
여담 : zero runtime이 되는 찰떡궁합의 css library로
vanila extract이 있는데 사용할 기회가 있으면 좋겠다.
0개의 댓글
