어떤 개념이나 기술이 트렌드로 자주 오르내린다는 건, 대개 그게 해결하고자 하는 문제의 방향성에 꽤 많은 지지를 얻었다는 뜻이라고 본다. zero-runtime CSS-in-JS 도 그런 맥락에서 이해하고 있다.
jQuery 가 DOM 선택과 조작을 용이하게 해서 “브라우저별로 제각각인 DOM API”라는 문제를 해결하려고 나왔던 것처럼,
React나 Vue 가 “원천 DOM 표준”을 직접 다루는 대신 자기들만의 컴포넌트/상태 모델을 통해 개발 효율을 높이고 유지보수 비용을 낮추려 했던 것처럼,
zero-runtime CSS-in-JS 역시 “스타일링 방식이 JS 번들을 얼마나 비대하게 만들었는가”라는 문제 위에서 등장한 기술이라고 볼 수 있다.
내가 보기에는, 결국 해결하려고 했던 문제는 단순하다.
빠릿빠릿한 서비스 화면의 성능. 그리고 그 뒤에 숨어 있는 “스타일링 방식이 JS 번들을 얼마나 비대하게 만들었는가”라는 문제.
이 글은 “과거에 어떤 식으로 스타일링을 했고, CSS-in-JS 가 어떤 식으로 무거워졌고, zero-runtime 이 거기서 정확히 뭘 들어내려는지”
한 번 정리해둔 메모에 가깝다.
CSS-in-JS 가 처음 등장했을 때만 해도, 나름 꽤 매력적인 슬로건이 있었다.
대충 이런 그림.
const Button = styled.button`
background: ${(props) => (props.primary ? "blue" : "gray")};
color: white;
`;
코드만 보면 꽤 그럴듯하다.