[React] 컴포넌트 주도 개발 Component Driven Development (CDD)

📌  Component Driven Development (CDD)

: 부품 단위로 UI 컴포넌트를 만들어 나가는 개발

CDD 방법을 활용하여 UI 를 구축하는 사이트

1) UN
2)  BBC 

Storybook

 

---

📌  CSS 전처리기(CSS Preprocessor)

: CSS가 구조적으로 작성될 수 있게 도움을 주는 도구

 

SASS (Syntactically Awesome Style Sheet)

• CSS를 확장해 주는 스크립팅 언어
• 자바스크립트처럼 특정 속성(ex. color, margin, width 등)의 값(ex. #ffffff, 25rem, 100px 등)을 변수로 선언하여 필요한 곳에 선언된 변수를 적용
• 복되는 코드를 한 번의 선언으로 여러 곳에서 재사용할 수 있도록 해 주는 등의 기능
• SASS는 SCSS 코드를 읽어서 전처리한 다음 컴파일해서 전역 CSS 번들 파일을 만들어 주는 전처리기(preprocessor)의 역할을한다.

 

📌 CSS 전처리기의 문제를 보완하기 위해나온 방법론.

: BEM, OOCSS, SMACSS 같은 CSS 방법론이 대두됨.

방법론의 공통 지향점은 다음과 같다.

• 코드의 재사용
• 코드의 간결화(유지 보수 용이)
• 코드의 확장성
• 코드의 예측성(클래스 명으로 의미 예측)

 

	특징	장점	단점
CSS	기본적인 스타일링 방법.	-	일관된 패턴을 갖기 어렵다. !important의 남용.
SASS	프로그래밍 방법론을 도입하여 컴파일된 CSS를 만들어내는 전처리기.	변수/함수/상속 개념을 활용하여 재사용이 가능하다. CSS 구조화.	전처리 과정이 필요하다. 디버깅의 어려움이있다. 컴파일한 CSS 파일이 거대해진다.
BEM	CSS 클래스명 작성에 일관된 패턴을 강제하는 방법론.	네이밍으로 문제 해결함. 전처리 과정이 불필요하다.	선택자의 이름이 장황하다. 클래스 목록이 많아진다.
Styled-Component (CSS-in-JS)	컴포넌트 기으로 CSS를 작성할 수 있게 도와주는 라이브러리.	CSS를 컴포넌트 안으로 캡슐화한다. 네이밍이나 최적화 신경쓸 필요 없다.	빠른 페이지 로드에 불리하다.

 

---

📌  CSS-in-JS 의 탄생

 

Styled-Component

기능적(Functional) 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할 수 있는 아주 단순한 패턴을 제공한다.