runtime css-in-js

1. 자바스크립트 번들에 함께 빌드 된다.

2. Runtime CSS-in-JS

   • prop 이 변할 때 마다 스타일을 동적으로 생성하여, JavaScript 코드로 동적인 스타일링을 한다.
   • 빌드타임에서 모든 스타일을 생성하지 않고, 런타임을 활용한다.
   • 크게 문제는 없지만, 스타일 계산 비용이 커지므로 복잡한 컴포넌트에선 문제가 된다.

3. 초기 렌더링 최적화를 위해서 현재 화면에서 필요한 CSS 만 가져오는 방법은?

   • styled-component, emotion 등은, 초기 페이지 렌더링에 필요한 css 를 추출하여 해당 페이지의 html의 style 태그로 삽입한다.
   • 이 후에 필요한 style 은 동적으로 런타임에 생성한다.

4. 성능 최적화 노력 -> CSSOM 수정

   • 프로덕션 모드에서는 DOM이 아니라, CSSOM 만 수정하도록.
   • 그래서 DOM 트리를 다시 파싱해야하지 않도록 개선했다.

왜 런타임에 계산이 필요할까?

• css in js 에 추가되는 자바스크립트 변수등이 변경되기 때문 아닐까!
• css in js 역시 결국 js이므로.. js가 런타임에 동작하듯, css in js도 런타임에 동작하는게 아닐까 생각한다.

zero-runtime css in js