3. CSS in JS

• 자바스크립트를 이용해서 스타일 컴포넌트를 만들어내는 것

• 자바스크립트가 파싱될 때 CSS가 생성되어 DOM에 붙여짐

• 스타일을 선언적이고 유지가능한 방식으로 사용할 수 있고, CSS를 컴포넌트 수준으로 추상화 할 수 있음

• Emotion, Styled Components, JSS, Tailwind CSS 등이 이러한 컨셉을 구현한 라이브러리

장점

• 지역 스코프 스타일 : 클래스 이름이 중복되어 충돌하는 것을 막을 수 있음

• 콜로케이션 : 단일 컴포턴트에 대한 모든 것을 같은 위치에 두어 해당 컴포넌트가 사용하는 스타일들만 구분할 수 있음

• 인라인 스타일을 사용하지 않고도 자바스크립트 변수를 style에 사용할 수 있음

단점

• 런타임 오버헤드가 늘어남 : 컴포넌트가 렌더링될 때 CSS in JS 라이브러리는 document에 삽입할 수 있는 일반 CSS로 스타일을 직렬화 해야함

• 번들크기가 늘어남

• 라이브러리의 내부 컴포넌트로 인해 React DevTools가 어지러워짐

성능 이슈

• JS의 크기가 커질수록 성능에 불리해짐

• JS에서 CSS를 포함하는 것은 성능상의 문제를 가져올 수 있음

• Styled component 대신 Linaria를 사용하여 빌드할 때 CSS를 뽑아내는 방식이나 vanila-extract 등을 사용하여 이 문제를 개선할 수 있음

• Svelte는 빌드할 때 CSS를 분리해서 별도 파일로 만들어주기 때문에 성능저하를 피할 수 있음