/*작성중*/ CSS-In-Js vs CSS - In - CSS ( Sass, Emotion, Styled-Components 비교 정리 )

용어 정리 

 

- CSS Prreprocessors

- SCSS

- SASS

• 둘 다 CSS 전처리기
• SCSS는 SASS에서 파생된 언어 - 거의 동일한 기능을 보유 (문법적으로 살작 다를 뿐 ) - 미관상 문제
• sass는 중괄호와 세미콜론 생략, 
• scss는 기존의 css와 비슷하게 중괄호와 세미콜론으로 구분 

 

 

 

 

 

 

SASS & SCSS 

링크 : sass 받아들이기, 당신이 그냥 CSS로 그만 코딩해야 하는 이유 2019.

링크 : Emotion vs SCSS vs Styled-Components _ 2023

링크 : css-in-js 라이브러리 선택 비교 (styled-component vs emotion)

링크 : React - emotion 과 styled-component의 차이 

링크 : (번역) 우리가 CSS- In - JS 와 헤어지는 이유 _2022

           ->  원본 링크 _2022

링크 : Emotion vs Styled-Components _EN_2023

 

 

SCSS 특징

• CSS 전처리기 ( CSS preprocessor ) : CSS의 문제점을 프로그래밍 개념( 변수, 함수, 연산자, 상속 등) 을 사용해서 보완
• 공통 요소를 변수처리 하거나 반복적인 부분을 함수로 대체하여 재사용성을 높일 수 있다. 
• 선택자의 중첩(nesting), 상속으로 구조화된 코드를 유지할 수 있다. 
• 조건문, 반복문을 통해서 동적으로 CSS 관리 가능
• 전처리기이기 때문에 CSS 로의 컴파일 도구가 필요. ( .scss -> .css )
• 컴파일 소요 시간 필요. 

 

 

 

_01_    CSS - In - CSS    &     CSS - In - JS

 

CSS - In - CSS  :    SASS 

• CSS Module, CSS 전처리기(SASS, LESS 등)
• 별도의 자바스크립트 전환이 필요 없어 빠른 속도.

 

렌더링 속도가 빨라야 하는 인터랙티브한 프로젝트라면 CSS - IN - CSS

 

 

 

CSS - In - JS  :    Styled-components  /   Emotion 

• Styled-Components, emotion 등등 라이브러리. 
• 자바스크립트에서 CSS를 작성하는 방식.
• 자바스크립트와 CSS 사이의 변수를 공유할 수 있다. 
• 현재 사용 중인 스타일만 DOM에 포함시킬 수 있다. 
• CSs- In CSS에 비해 느린 속도 ( JS - > CSS 로이 변환이 필요하기 때문)
• 별도의 라이브러리 설치가 필요하여 번들 크기 증가. 

 

주요 장점

• 지역 스코프 스타일 
• 코로케이션?
• 자바스크립트 변수를 style에 사용할 수 있다. 

 

단점 

• 런타임 오버헤드 
• 번들 크기 증가 
• ReactDevTools를 어지럽힌다. 
• CSS 규칙을 자주 삽입하면 브라우저에서 더 많은 추가 작업을 수행해야 한다. - 리액트가 렌더링 하는 동안 모든 프레임에 대한 모든 CSS 규칙을 효과적으로 재계산하게 한다. But so much slow
• CSS-In-Js를 사용하면 특히 SSR 및 혹은 컴포넌트 라이브러리를 사용할 때 잘 못 될 수 있는 부분이 훨씬 많다. Emotion 깃헙 저장소에서 많은 관련 이슈를 받는다. ( Emotion 기반 컴포넌트 라이브러리와 함께 SSR을 사용하면 제대로 작동하지 않는다.)

 

개발의 효율성이 중요하고 컴포넌트의 위주의 프로젝트라면 CSS - In - JS

 

 

 

 

---

 

 

 

 

_02_    Styled-Component   &    Emotion

 

Styled-Components

• 사용방식의 익숙함. - 개발 생산성 향상 
• JS에서 CSS를 사용할 수 있도록 도와주는 스타일링 프레임워크

주요 장점

• 재사용성 업, js에 영향을 받는 스타일링을 간편하게 구현 가능. 
• 가독성 굳 - css의 문법 사용. 
• 빌드하면 임의이 클래스 명에 스타일이 적용되어  중복되지 않는 특정 class 명 생성.
• 확장 스타일링 가능 
• 중첩 스코프 
•  

 

문제점 

• typescript에서 사용하려면 별도의 패키지 @types/styled-components 추가 설치. 

 

링크: React- Styled-Components 사용기 _2020

 

Emotion 

• emotion/css
  • 개발자가 클래스명을 짓지 않아도 되서 편리.
  • 스타일 컴포넌트가 생성되지 않아 디버깅이 힘들고 가독성이 떨어짐.
  • 인라인 방식으로 css를 작성해야 하기 때문에 코드가 매우 늘어지고 지저분해짐.
• emotion/styled 📍
  • styled-components와 방식이 유사. 
  • 컴포넌트를 생성하기 때문 리액트 디버깅이 편리. 
  • emotion/styled, emotion-react 라이브러리를 함께 사용해야 함. 
  • styled-components 보다 더 다양한 기능이 있어 확장성에 좋다. 
  • styled-component 방식을 그대로 사용할 수도 있지만 다른 방식을 통해 더 다양하게 사용할 수도 있어 확장성이 더 뛰어나다. 

 

문제점

• typescript에서 사용하려면 <<   /** @jsxImportSource @emotion/react */   >> 를 파일 최상단에 추가해주어야 한다. 
• .tsconfig.json에 기입 요소 

//.tsconfig.json
{
  "compilerOptions": {
    ...
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react",
  }
}

 

 

 

* 오히려 좋아 TailwindCSS 사랑합니다.

(링크 : https://velog.io/@composite/React-SSR-%EC%8A%A4%ED%83%80%EC%9D%BC%EB%A7%81%EC%97%90-%EA%B0%9C%EA%B3%A0%EC%83%9D%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0)