[CSS] SCSS, MUI, styled-component, emotion

SCSS 란?

SASS와 비슷한, 문법적으로 멋진 CSS라는 뜻. SASS 보다 늦게 나왔고, 약간의 문법 차이가 있으나 매우 비슷하다.

• 넓은 범용성
• 높은 호환성
• 중괄호로 중첩을 표현
• 세미콜론으로 속성을 구분
• CSS와 좀 더 비슷
• 공식 레퍼런스나 프레임워크가 SCSS를 선호
• 중첩, 변수 선언, 연산자 등 보유

 

MUI란?

https://mui.com/

MUI: The React component library you always wanted

프로토타이핑과 제품개발에 가장 많이 활용되는 인터랙티브 컴포넌트 기반의 React UI라이브러리.
Google의 Material Design 컴포넌트를 쉽게 사용할 수 있도록 도움.

• 기본 자체로도 예쁘다
• 사용자 정의 가능
• 빠른 제작 (키트 제공)
• React에서 가장 큰 UI 커뮤니티 보유
• Emotion 을 기본 스타일링 엔진으로 사용하나, styled-components 도 가능

 

Styled Component

Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리. 
리액트 컴포넌트를 쉽게 만들 수 있으며 Javascript 코드 내에서 일반 CSS로 구성 요소의 스타일을 지정할 수 있다.

• css-in-js 형식
• props 사용 가능
• nesting 지원
• global style 적용 가능
• component 단위로 작업하는 React 구조에 최적화

 

Emotion

Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리.
주로 Framework Agnostic(프레임워크를 사용하지 않는 것)과 React 두 가지 방식으로 사용된다.

• css-in-js 형식
• className이 자동으로 부여
• 재사용이 가능
• props 사용 가능
• vendor-prefixing, nested selectors, and media queries 등이 적용되어 작성이 간편
• styled component 사용방식과 css prop 기능을 지원하여 확장에 용이
• styled component보다 파일 사이즈가 작고, ssr(서버사이드 랜더링) 시 서버 작업 X

 

---

고민 끝에 나는 MUI + SCSS 방식을 택했다.
MUI가 기본적으로 제공하는 컴포넌트들이 너무 예쁘고 커스터마이징이 가능해서 좋았지만 실제로 커스터마이징 할 때 테마를 직접 작성하거나, 독립적인 컴포넌트마다 개별적인 테마를 또 만들어야 한다는 부분이 번거로웠다. 물론 sx나 style로 지정이 가능했으나, 개발자모드를 켜보니 인라인으로 작성되는 것 같아서 아쉬웠다.
그래서 많은 커스터마이징이 필요하지 않은 컴포넌트는 MUI로 작업하되, 애니메이션 같은 세부적인 CSS가 필요한 부분은 SCSS로 작성하여 프로젝트를 진행하고 있다.
다음 프로젝트는 개인적으로 Tailwind를 공부해서 작업해보고 싶다.