개요
- React로 프로젝트를 하다보면 css, module.css, scss, tailwind, styled-component, chakra-ui, material-ui, and design, ... 등등 스타일링에 매우 어려 가지가 사용됨을 알 수 있다.
- 과연 어떤 것을 쓰는 것이 최선이고 가장 편리한지 차이점을 알아보며 정리하고자 한다.
CSS IN JS
- Javascript, 즉 리액트 내부에서 스타일링 요소까지 처리하는 것이다.
- 대표적으로 styled-component가 존재하며 따로 css로 분리해 관리할 필요 없이 .js file 내에서 스타일요소 까지 처리할 수 있다.
- 앞선 포스팅에서 쓰인 css custom property로 state를 보내서 동기화할 필요없이 직접적으로 연동이 가능한 점도 장점이다.
- 또한 현재 사용중인 스타일만 DOM에 표시된다.
- 하지만 별도의 라이브러리 설치로 인해 번들 크기가 일반 css를 사용했을 때 보다 커져 느려질 수 있다.
CSS IN CSS
- module.css과 같이 className의 scope를 국한 시켜 namespace충돌을 방지하거나 sass같은 전처리기를 사용해 프로그래밍적 요소를 가미해 css를 생성하는 방식이다.
- css in js와 다르게 필요한 스타일을 미리 다 만들어 두기에 여러 인터렉션에 대해 빠르게 반응할 수 있다.
My opinion
-
나는 개인적으로 CSS in CSS를 선호한다.
-
물론 미리 만들어진 style library들 (material, chakra, antd)들이 효율이 떨어진다거나 싫다는 것이 아니다.
-
웹이 갈수록 다양해지고 사용자 입장에서 볼 때는 정확히 동작하는 거 이상으로 인터랙티브한 요소도 필요해 지는 중이라 생각된다.
-
CSS in JS를 사용하는 경우 미리 스타일을 만들어 놓지 않기에 여러 인터랙션에 대해 늦는다.
-
transition, animation, 심지어 3D 요소까지 등장할 수 있는 현재 웹 생태계에서 이런 요소를 고려해 볼 때, 나는 css in css의 손을 들어주고 싶다.
물론 항상 CSS in CSS가 옳다는 것보다는 여러 방식을 익히고 프로젝트에 대해 어떤 방식이 가장 효과 적이며 사용자 입장에서 또한 어떤 방식으로 접근하는 것이 좋을지 계속 고민해야할 문제일 것이다.
참고 자료
https://blueshw.github.io/2020/09/14/why-css-in-css/
https://www.samsungsds.com/kr/insights/web_component.html
while( life ) { learn more; }