SASS vs Post CSS vs styled-component

공부

Gushers 2022. 12. 26. 17:52

이번에 SCSS을 리액트에 적용하면서 나는 SCSS와 Post CSS, styled-component(emotion)를 모두 사용해 보았는데 각각의 장단점이 너무 뚜렸했다.

물론 디자인을 중점으로 하고있는 것이 아니기 때문에 엄청 깊고 잘알지는 못하기 때문에 경험 + 공부를 통해 작성해보고자 한다.

SASS

SASS란 CSS 전처리기이다.

보통 이런 전처리기는 믹스인, 중첩셀렉터, 상속셀렉터등이 존재하기 때문에 이를 사용하여 CSS의 가독성을 높이고, 유지보수하기 좋게 해준다.

SASS는 위에서 작성한 문법 외에도 for, if, 변수등이 존재하기 때문에 CSS를 작성할 때 편하게 작성하는 것이 가능하다.

SASS만의 문법이 존재하기 때문에 처음에 배울때 약간의 어려움이 있다.

리액트에서 SASS만 사용한다고 하였을 때 PostCSS와 styled-component와 다르게 하나의 CSS파일로 합쳐지기 때문에 클래스명을 겹치지 않게 유의해야 한다.

MDN에 PostCSS를 검색해본다면 전처리기로 나오지만 정확하게 말하면 CSS를 Js로 조작하는 후처리기이다.

전처리기인 SASS와 같이 사용하는 것이 가능하지만 나는 같이 사용하지 않고, 오로지 PostCSS만 사용해보았다.

PostCSS의 문법 자체는 CSS와 거의 비슷하다. 물론 PostCSS에서 제공하는 문법도 존재한다.

Module화가 가능하기 때문에 클래스명이 겹치는 것을 신경쓰지 않고, 작성하는 것이 가능하다.

PostCSS는 자바스크립트 기반이기 때문에 단순한 플러그인의 경우에는 직접 개발하는 것도 가능하다.

SASS처럼 강력한 문법을 지원하지 않는다.

필요한 플러그인의 경우에는 직접 제작하여야 한다.

Styled-Component는 CSS-in-Js를 편하게 지원하는 자바스크립트 라이브러리이다. 대표적으로 emotion, tailwind가 있는데 tailwind까지는 사용해보지 못했다.

하지만 현재 CSS 순위를 보면 tailwind가 압도적으로 1등인것을 알 수 있는데 사용해보지는 못했지만 그럴만한 이유가 있을 것 같다.

JS파일에서 바로 작성하기 떄문에 파일을 왔다갔다 하지 않고 빠르게 작성할 수 있다.

리액트에서 많이 사용하는 Antd같은 외부 API를 사용할 때 Class를 사용하지 않고 컴포넌트 이름으로 CSS가 가능하기 때문에 같이 사용할때 충돌 혹은 오류같은 것을 방지할 수 있다.

JS파일에서 작성하기 때문에 CSS코드가 길어지게 된다면 파일을 나누지 않는다면 오히려 코드의 가독성이 떨어지게 된다.

그리고 컴포넌트 형식으로 만들어야 하기 때문에 오히려 컴포넌트 이름을 정할 때 겹치지 않고, 컴포넌트의 이름을 가독성 좋게 만들어야하기 때문에 더 번거로울 수도 있다.

위에 작성한 3가지를 깊게 사용해보지는 못했지만 각각의 라이브러리를 사용하면서 장단점이 너무 뚜렸했기에 이 글을 작성하면서도 내가 몰랐던 기능들을 알게되었다.

나는 개인적으로 PostCSS가 모듈화가 가능하고, Class 이름이 겹처도 상관없었기 때문에 사용하면서 제일 편했다고 느꼈다.

그리고 요새 유행하는 tailwind의 경우에는 왜 유행하고 사람들이 찾고있는지 궁금해졌기 때문에 tailwind 사용하여 작은 프로젝트라도 한번 만들어 보고 싶다는 생각이 들었다.