현대 웹 개발에서는 스타일링을 처리하는 방법이 다양하게 발전했다.
그 중 CSS-in-JS와 CSS-in-CSS는 가장 대표적인 접근 방식이다.
이 두방식은 각기 다른 장점과 단점을 지니고 있어 사용자의 프로젝트에 맞게 선택할 수 있다.
이번 글에서는 두 스타일링의 특성을 비교해보려 한다.
컴포넌트 기반 개발이 증가하면서 CSS의 범위(scope)를 제한하고, 스타일 충돌을 방지하기 위해 CSS-in-JS가 등장했다. 특히 styled-components 및 emotion 같은 라이브러리는 동적인 스타일링과 props활용이 가능해 큰 인기를 끌었다. 하지만 최근 런타임 성능, 스타일 재사용 어려움 등의 단점으로 CSS-in-JS에서 벗어나 성능 최적화를 위한 Vanilla CSS, Tailwind CSS, CSS Modules와 같은 대안으로 움직이는 동향이 보인다.
1. CSS-in-CSS란?
프론트엔드라면 처음 코드를 시작할때 대부분이 사용하는 방식으로, CSS파일을 외부에서 작성하여 HTML 파일이나 Javascript 파일에 링크하는 전통적인 스타일링 방법이다.
스타일을 별도의 css파일로 관리하는 방식으로 , Javascript에서 분리되어 독립적으로 관리된다.
👍 장점
- 성능 최적화: 브라우저에서 스타일을 해석하고 적용하는데 최적화 되어있음, 외부 css파일을 캐싱할 수 있어 성능에 유리(브라우저가 이미 로드된 CSS파일을 저장(caching)해두고, 이후 같은 파일을 다시 요청할 때 네트워크 요청을 생략하고 로컬 저장소에서 파일을 바로 가져오는 방식)
- 디버깅 용이: 디버깅 시, CSS파일에서 클래스를 쉽게 추적 가능, HTML,JS와 분리되어있어 문제 발생 시 빠르게 찾을 수 있음
- 라이브러리 및 툴 지원: SCSS와 같은 전치리기 도구를 사용하여 효율적인 스타일링 가능
👎🏾 단점
- 스타일 충돌 가능성: 여러 컴포넌트가 같은 CSS 클래스 사용하는 경우, 스타일 충돌할 수 있음
- 동적 스타일링 제한: CSS가 Javascript와 결합되지 않으므로, 상태에 따른 동적 스타일링 제한적
- 재사용의 어려움: 스타일을 재사용하려면 클래스 이름을 공유하거나 파일을 별로도 분리해야 하므로 컴포넌트 기반의 접근법에 비해 불편
2. CSS-in-JS란?
Javascript 파일 내에서 CSS 스타일을 작성하는 방법이다. 리액트 커뮤니티에서 가장 인기있는 styled-components, emotion과 같은 라이브러리를 사용하여 구현한다. 스타일을 컴포넌트 단위로 관리할수 있다는 장점이 있다.
런타임 CSS-in-JS : 단순하게 앱이 실행될 때 라이브러리가 스타일을 해석하고 적용하는 것을 의미
👍 장점
- 지역 스코프 스타일(컴포넌트 기반): CSS가 JS코드 내에서 관리되므로 컴포넌트와 스타일이 하나로 결합되어 가독성 및 재사용성이 좋음
- 스타일링의 재사용성: 재사용 가능한 형태로 관리 가능하며, 동적 스타일링을 통해 유연한 UI를 구현할 수 있음
- 타입스크립트와의 통합: 타입스크립트와 통합이 쉬워 안전하게 다를 수 있음
👎🏾 단점
- 런타임 성능 저하: 스타일이 JS 코드에서 동적으로 생성되기 때문에, 실행 시간에 스타일을 계산하는 과정에서 성능 저하가 발생할 수 있음
- 번들 크기 증가: JS파일 안에 스타일을 포함시키므로, 스타일이 많을 경우 번들 크기가 커질 수 있음
- 디버깅의 어려움: CSS 클래스 이름이 동적으로 생성되기 때문에, 디버깅 시 클래스 이름을 추적하기 어려울 수 있음
3. CSS-in-CSS 와 CSS-in-JS 비교
| 특성 | CSS-in-CSS | CSS-in-JS |
|---|---|---|
| 스타일 관리 | 외부 CSS 파일에서 관리 | 컴포넌트 내부에서 관리 |
| 동적 스타일링 | JS로 동적 스타일링 어려움 | 상태에 따른 동적 스타일링 가능 |
| 성능 | 브라우저 최적화된 CSS렌더링, 성능 우수 | 런타임에 스타일을 계산하므로 성능 저하 가능 |
| 스타일 충돌 방지 | 전역 스타일 관리 시 충돌 가능 | 스타일 캡슐화 및 충돌 방지 |
| 디버깅 | 쉽게 디버깅 가능 | 동적으로 생성되는 클래스명으로 디버깅 어려움 |
| 스타일 재사용 | 명시적인 설정 필요 | props와 함께 동적 스타일 재사용 용이 |
| 번들 크기 | 별도의 CSS파일로 번들 크기 최적화 가능 | 스타일을 포함한 JS파일로 번들 크기 증가 |
4. 결론
컴포넌트 기반의 개발을 선호하거나 동적 스타일링이 중요한 프로젝트라면? ->
CSS-in-JS
전통적인 방식을 선호하거나, 성능 최적화와 스타일 충돌 방지가 중요한 프로젝트라면? ->CSS-in-CSS
CSS-in-JS는 여전히 유용하지만, 성능 문제와 유지보수성을 고려할 때 대체 기술(Vanilla CSS, Tailwind CSS, CSS Modules)들이 더 좋은 선택이 될 수도 있을 것 같다.
CSS-in-JS는 이제 필수가 아니라 선택지가 되었고, 성능과 유지보수를 고려해 적절한 스타일링 방식을 선택하는 것이 중요한 것 같다!
참고: https://junghan92.medium.com/%EB%B2%88%EC%97%AD-%EC%9A%B0%EB%A6%AC%EA%B0%80-css-in-js%EC%99%80-%ED%97%A4%EC%96%B4%EC%A7%80%EB%8A%94-%EC%9D%B4%EC%9C%A0-a2e726d6ace6
