11장 CSS in JS
11.1 CSS-in-JS란
11.1.1 CSS-in-JS와 인라인 스타일의 차이
- CSS-in-JS를 사용하면 실제로 CSS가 생성되기 때문에 미디어 쿼리, 슈도 선택자 등과 같은 CSS 기능을 손쉽게 누릴 수 있다
- CSS-in-JS의 장점
- 별도의 스타일시트를 유지보수할 필요 없이 각 컴포넌트의 스타일을 관리할 수 있다
- 각 컴포넌트의 스타일은 부모와 독릭되어 독립적으로 동작한다
- CSS-in-JS는 CSS로 컴파일될 때 고유한 이름을 생성하여 스코프를 만들어준다. 따라서 선택자 충돌을 방지할 수 있다
- 자동으로 벤터 프리픽스가 붙는다
- 자바스크립트와 CSS 사이에 상수와 함수를 쉽게 공유할 수 있다
11.1.2 CSS-in-JS 등장 배경
- 웹 환경이 변하면서 요구사항이 다양해지고 복잡도도 계속 증가했다
- 특히 선택자의 복잡도가 높아짐에 따라 CSS 전처리기 방식이 등장하기 시작함
- 웹 어플리케이션의 UI를 구성하는 데에도 CSS를 사용하고 있고 웹 개발에 컴포넌트/모듈 방식이 적용됨에 따라 CSS Modules를 시작으로 자바스크립트에서 CSS를 생성하는 방식이 도입됨