Styled-Components

 

Styled-Components란?

JavaScript와 CSS를 결합하여 컴포넌트 기반 스타일링 가능

=> CSS-in-JS

 

컴포넌트를 더 깔끔하고 모듈화된 스타일링 코드로 관리 가능

 

Styled-Components 장단점

장점

- CSS도 컴포넌트화 할 수 있다.

- CSS와 JS의 상호작용이 쉽다.

- Class 이름을 자동으로 지어준다.

- SSR을 지원하여 초기 렌더링 성능 개선이 가능하다.

 

단점

- SCSS 코드를 CSS로 변환하는 과정이 필요해서 조금 더 느리다.

- Clsss 이름이 안 이쁘다.

- JS의 크기가 커진다.

 

 

CSS-in-JS?

JavaScript를 사용하여 CSS를 작성하고 관리하는 방법이다.

 

- 각각의 컴포넌트에 스타일을 지정할 수 있어 CSS 이름 충돌을 방지한다.

- JavaScript의 변수나 조건문 등을 활용하여 스타일을 동적으로 조작이 가능하다.

ex) props

- CSS를 모듈화하고 유연하게 작성할 수 있다.

 

CDD(Capability-driven development)?

- CDD는 사용자의 요구사항을 충족시키기 위해 기능을 설계하고 개발

=> 기능 중심 개발 & 사용자 경험 중심

 

- Styled-Components를 통해 개발된 컴포넌트는 각각 독립적으로 스타일 적용

=> 반복적이고 짧은 개발 주기

 

- 기능을 독립적이고 재사용 가능한 단위로 개발(컴포넌트 단위로 스타일을 정의하고 관리)

=> 모듈화& 재사용성