CSS in JS vs CSS

bono 님의 블로그 글을 공부하며 내 식대로 요약한 것으로 모든 copyright는 bono님에게 있습니다.

 

한동안 많이 사용하던 styled-component가 끝발이 떨어졌다. 왜 그런지에 대해 좀 알아보자.

 

일단 css는 Cascading Style Sheets이란 뜻으로 폭포처럼 위에서 내려가는 식으로 스타일을 입히는 문서라는 뜻으로 과거에는 신입이나 경력이 짧은 사람에게 맡기는 경우가 많았다고 한다. 당시에는 프론트엔드 영역이 명확하지 않았던 시절이다. 지금은 웹이 점점 복잡해지고 동적 요소가 많아지면서 퍼블리셔라는 직종이 생기고 html, css만으로 화면의 모든 스타일을 제어할 수 없는 세상이 펼쳐졌다.

 

프론트엔드 개발자들도 CSS를 전문적으로 설계하고 다루어야 한다. sass와 같은 모듈 구조와 몇가지 처리 가능한 문법을 제공하는 전처리기가 등장했지만 해결책이 아니었다. 해결책을 찾기전 문제점들을 살펴보면

 

1. 모든 스타일이 global로 선언되어 별도의 class 명명 규칙(Bem등)을 사용해야함
2. css간 의존관계를 관리하기 힘듬.
3. 기능 추가, 변경, 삭제로 인한 불필요해진 css를 제거하기 어려움
4. 클래스 이름의 최소화 문제
5. js의 상태값을 공유할 수 없음. (state 값에 따라 style이 변경하는 경우)
6. css 로드 순서에 따라 스타일 우선순위가 바뀜
7. css와 js가 분리로 상속에 따른 격리가 어려움.
   이를 해결하기 위해 css-in-js가 대두되었다. 다양한 module이 있지만 (styled-component, jss, emotion 등) 가장 유명한 styled-component를 기준으로 다루어 보겠다. 현재 일주일에 200만 건의 다운로드 수를 기록하고 있다.

 

이를 사용하면 위에 대두된 문제들은 대부분 해결된다.

1. 클래스명이 유니크한 해시값으로 변경되어 명명규칙이 필요없다.
2. 컴포넌트 단위로 추상화되어 css간 의존성은 상관없다.
3. 컴포넌트와 css가 함께 존재하므로 필요없는 css는 사용하지 않는다.
4. 클래스명 해시화
5. 같은 컴포넌트에 작성하므로 동적 코딩 가능
6. 컴포넌트 스코프에서 동작
7. 2번과 동일함.

이렇게 css-in-js가 해결책으로 보이지만 세상은 한발짝 더 발전했다. 지금은 css-in-js를 지양하는 세상이 왔다. 하지만 무조건 지양하지는 않고 상황에 맞춰 사용할 필요가 있는데 이에 대해 자세히 알아보자.

 

단점을 알아보면

1. 번들 크기가 커진다.

현대 사회에서 웹 사이트의 가장 중요한 점은 속도이다. 유져에게 컨텐츠를 보여주는 속도. 유져들은 친절하지 않고 지체되면 바로 이탈을 해버린다. 그렇기에 spa가 생긴 것이고 css vs css in js 같은 이야기를 하고 있는 것이다.

 

일단 styled-component를 사용하려면 별도의 라이브러리를 설치해야 한다. 추가적인 라이브러리가 필요할 수도 있고 이는 번들 사이즈가 커진 것을 의미한다. 이는 다운로드 시간이 길어지게 하고 css-in-js는 js가 모두 로딩된 다음 css가 생성되기 때문에 더욱 느려진다. 반면 css는 브라우저가 해석하기에 별도의 라이브러리가 필요없고 바로 해석이 가능하여 빠르다.

 

SRR을 통해 초기 진입시 미리 다운을 받아 어느정도 해결할 수 있지만 동적 인터렉션이 필요한 웹사이트라면 제대로 적용 안될 수도 있다.

2. 인터렉션이 늦다.

css-in-js는 모든 상태에 맞는 스타일을 전부 만들어 두기에 컴포넌트의 상태가 변경되도 바로바로 적용이 되지만 상태가 변경되면 js의 css코드를 읽어와서 파싱해야 해서 속도가 느리다.

 

애플 웹사이트가 좋은 예시인데 이렇게 많은 인터렉션이 들어간 사이트를 css-in-js로 개발하면 스크롤 위치가 바뀔 때마다 js에서 css가 재생성 된다고 생각하면 된다.

 

이를 해결하기위해 인터렌셕한 코드는 global style로 미리 정의해두면 좋다. 하지만 관리 포인트가 또 늘어나 관리가 어렵고 인터렉션이 많아지면 global style이 복잡해지기도 한다.

 

bono's blog에서 퍼왔습니다.

 

styled-component와 css modules의 성능 비교로 2657ms vs 655ms를 기록했다.

결론

css-in-js는 해결책이 아니다. 중요한 것은 두가지 다 용도를 명확히 알고 그에 맞는 선택을 통해 빠른 웹사이트를 구현해야 한다.

또 인터렉션이나 속도가 중요하다면 기존 css 방식을 사용하고 관리자 페이지나 위키같은 정적 사이트면 css-in-js를 사용하면 좋다.

참고

why-css-in-css

css성능비교