CSS-in-JS란?

• 자바스크립트 코드 내에서 CSS 스타일을 정의하고 관리하는 방식임
• CSS-in-JS를 사용하면 자바스크립트 또는 타입스크립트 코드에서 직접 CSS를 작성하여 리액트 컴포넌트 스타일을 지정할 수 있음
• styled-components와 Emotion이 가장 인기 있는 CSS-in-JS 라이브러리 중 하나임

👍장점

1️⃣ 지역 스코프 스타일

일반 CSS를 작성할 때는 광범위하게 스타일을 적용하기가 쉽지만, 광범위하기 때문에 클래스 이름 충돌이 없는지 확인하고 다른 클래스 이름을 지어야 한다는 단점이 존재 => CSS-in-JS는 기본적으로 스타일을 지역 스코프로 지정하여 이 문제를 완전히 해결

2️⃣ 각 컴포넌트에서 어떤 스타일을 적용하는지 보기 쉬움

일반 CSS를 사용할 때의 문제는 CSS와 자바스크립트가 별도의 파일에 있기 때문에 각 컴포넌트에서 어떤 스타일을 사용하는지 빠르게 구분하기 어려움
하지만 CSS-in-JS를 사용하면 스타일을 사용하는 리액트 컴포넌트 내부에 직접 스타일을 작성할 수 있어서 유지보수가 편해짐

3️⃣ 자바스크립트 변수를 style에 사용할 수 있음

CSS-in-JS 스타일에서 자바스크립트 상수(colors 등)와 리액트 props와 state(fontSize, 클릭된 상태인지 등)를 모두 사용할 수 있음

👎단점

1️⃣ 런타임 오버헤드

컴포넌트를 렌더링 할 때 CSS-in-JS 라이브러리는 document에 삽입할 수 있는 일반 CSS로 스타일 데이터를 변환해야 하므로 컴포넌트가 복잡해지고 애플리케이션이 커지면 성능에 영향을 미침

2️⃣ 번들 크기 커짐

CSS-in-JS라는 추가적인 라이브러리를 다운로드해서 사용하는 것이기 때문에 SSR 또는 컴포넌트 라이브러리를 사용할 때 오류 가능성이 커질 수 있음

참고 : https://junghan92.medium.com/%EB%B2%88%EC%97%AD-%EC%9A%B0%EB%A6%AC%EA%B0%80-css-in-js%EC%99%80-%ED%97%A4%EC%96%B4%EC%A7%80%EB%8A%94-%EC%9D%B4%EC%9C%A0-a2e726d6ace6