"Why We're Breaking Up with CSS-in-JS"(번역)

전에도 CSS-in-JS가 성능 문제를 가지고 있다는 글을 본 적이 있는데 이번에는 글을 쓴 사람이 이모션(emotion)의 컨트리뷰터여서 좀 더 사람들이 관심을 가진 것 같다. 간단히 요약하면 CSS-in-JS는 스코핑 등의 장점이 있지만 런타임 성능을 떨어뜨린다는 내용이다. CSS-in-JS와 CSS의 랜더링 성능을 비교해보니 전자는 54.3ms, 후자는 27.7ms로 약 두배 가량 성능차이가 있었다고 한다.

리액트를 사용하는 많은 사람들이 리랜더를 줄여보겠다고 많은 시간을 쓰는게 현실인데 CSS 라이브러리만 바꿔도 성능이 두배 좋아진다면 바꾸지 않을 이유가 없다. 이제는 스타일드 컴포넌트나 이모션 같은 도구는 놔줄 때가 된게 아닌가 싶다. 처음에 나왔을 때는 정말 유용했지만 시간이 많이 지났고 새로운 기술과 도구가 많이 나왔다. 컴파일 타임에 CSS를 추출해주는 도구도 대안이 될 것 같다. 위의 글에서는 이들도 역시 단점이 있다고 하지만 이모션을 계속 쓰기 보다는 훨씬 좋은 선택일테다. Styled JSX를 검토하고 써봤는데 단점도 있지만 사용하기에는 크게 나쁘지 않았다.

스벨트(Svelte)는 빌드할 때 CSS를 뽑아줘서 이런 류의 성능 저하가 발생하지 않는다. 애플이 스벨트를 사용하는 모습이 간간히 보이는데 인력 채용 문제만 아니면 정말로 갈아타고 싶다.