Styled Components

Styled Components는 컴포넌트 단위로 스타일링하기 때문에 개별 케이스로 분리해 CSS를 작성할 수 있다.

템플릿 리터럴과 CSS기능을 사용해 구성 요소에 반응하는 스타일을 제공하는 CSS-in-JS 스타일링을 위한 프레임워크.

이렇게 분리하지 않고 스크립트 내에 작성하는 방식은 CSS-in-JS라고도 한다.

 

CSS-in-JS

스타일 정의를 CSS나 SCSS파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법.

CSS-in-JS방식에는 Styled Components, Emotion, styled-jsx, JSS등이 있다. 이 라이브러리를 import하여 사용한다.

• CSS의 컴포넌트화로 stylesheet의 파일을 유지보수할 필요가 없다. (CSS모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화한다.)
• JavaScript환경을 최대한 활용할 수 있다.
• JavaScript와 CSS사이의 상수, 함수를 쉽게 공유할 수 있다. React에서는 props를 활용한 조건부 스타일링이 가능하다.
• 현재 사용중인 스타일만 DOM에 포함한다.
• 짧은 길이의 유니크한 클래스를 자동 생성해 코드 경량화의 장점이 잇다.

하지만!!

• JavaScript내에서 CSS까지 모두 다뤄야하기 때문에 학습 곡선이 커집니다.
• 별도 라이브러리를 설치해야 하기 때문에 번들 크기가 커집니다.
• 인터랙션한 페이지일 경우, CSS파일을 따로 관리하는 방법에 비해 느린 성능을 보여줄 수 있습니다.

 

 

Styled Components의 장점

• 페이지에서 렌더링되는 요소에 맞춰 자동으로 해당 스타일만 삽입한다.
• 스타일에 대한 고유 클래스명을 생성한다.
• 더이상 사용되지 않는 CSS를 쉽게 삭제할 수 있다.
• 동적 스타일링이 편해진다.
• 컴포넌트를 확장해 props로 스타일링을 할 수 있다.