CSS-in-JS

CSS in JS 란

자바스크립트를 통해 컴포넌트의 스타일을 지정하는 방식으로 컴포넌트 레벨로 CSS를 추상화한다.

마크업에 클래스를 직접 작성할 필요가 없고, 라이브러리에 의해 동적으로 생성된 클래스가 기입된다.

스타일과 컴포넌트가 밀접하게 결합되어있어 다른 컴포넌트에 영향을 주지 않는다.

인라인 스타일과 다르다.

• Inline Style → 돔 노드에 style 속성으로 추가되며, 가상 클래스 선택자나 가상 선택자와 같은 CSS 기능을 사용할 수 없는 제약사항이 많다

• CSS-in-JS → 돔 상단에 <style> 태그를 추가하여 스타일을 적용한다.

장점

• 컴포넌트 레벨로 추상화시키고 모듈화되므로 스타일 충돌을 방지

• 현재 렌더링 되고 있는 컴포넌트의 스타일만 적용되어 CSS 성능문제가 개선됨

• 벤더 프리픽스가 자동으로 적용됨

단점

• 브라우저는 HTML을 파싱할 때 CSS 파일과 JS 파일을 병렬적으로 로드한다.

• JS로 동적으로 CSS를 생성하므로 초기 렌더링 성능 이슈가 있고, 번들링된 JS 파일 크기에 영향을 많이 받는다.

• React 18 Server Component에 스타일을 적용할 수 없다.

컴파일 타임 CSS-in-jS, 빌드타임 때 CSS-in-JS를 별도의 CSS 파일로 생성 해주어 위 단점들을 상쇄시켜준다.

• Compiled

• Vanilla Extract

• Linaria