[CSS] CSS-in-JS의 장점과 단점

CSS-in-JS의 장점과 단점

CSS-in-JS란?

CSS-in-JS는 JavaScript 안에서 CSS 스타일을 작성하고 조작하는 방법을 의미합니다. 이 방식은 주로 컴포넌트 기반의 JavaScript 라이브러리나 프레임워크 (예: React, Vue.js 등)에서 많이 사용됩니다.

Styled Component

Styled Component란? 자바스크립트 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 라이브러리로 리액트 개발에서 주로 사용되는 라이브러리 입니다.

장단점

장점으로는 CSS파일을 외부로 분리하는 방법이 아닌 Styled Component를 사용하여 CSS-in-JS 기술로 자바스크립트 파일 안에 CSS를 삽입하여 컴포넌트마다 고유한 클래스를 가지며 변수를 선언하거나 연산자들을 통하여 자유로운 CSS 커스텀 컴포넌트를 생성할 수 있습니다.
정리를 하자면 직관적인 className 사용과 사용되는 해당 컴포넌트와 관련된 CSS만을 포함하고 있기 때문에 유지보수 차원에서도 우수하다고 할 수 있다.

단점으로는 런타임에 스타일을 생성하기 때문에 성능 이슈가 발생할수 있으며, SSR과 SSG 환경 그리고 서버컴포넌트에서는 스타일링이 어렵다.
실제로 대표적인 SSR환경을 지원하는 Next.js 의 공식문서에는 런타임 JS가 필요한 CSS-in-js 라이브러리는 현재 서버 구성요소에 지원되지 않는다는 문구도 존재하고 있습니다.
자료 조사 중 참고한 블로그 문구에는
React18v, next13v에서 중점적으로 다루는 기능은 서버 컴포넌트로 알고있고 앞으로도 서버 컴포넌트에 대하여 업데이트가 이루어질 듯 싶은데, 서버에서 스타일링이 어려운 CSS in js방식을 계속 유지할까도 궁금하기도 합니다.
라고 써있기도 했습니다.