CDD

컴포넌트 주도 개발(Component-Driven Development)

컴포넌트를 모듈 단위로 개발하여 UI를 구축하는 설계 방법론

UI를 구성하기 위해 점진적으로 결합(조립)해 나가는 상향식(Bottom-up) 성향을 띈다.

스토리북은 CDD 방법론을 구현하는 도구 중 하나.

컴포넌트(Component)

제품의 작은 부품에 해당

각 컴포넌트를 독립적으로 빌드하고 관련된 상태를 정의

Button, Input, Avatar 등

컨테이너(Container)

2개 이상의 컴포넌트 조합

컴포넌트를 결합하여 점차적으로 복잡성을 증가시키면서 새로운 기능을 추가

Form, Header, Table

페이지(Pages)

2개 이상의 컨테이너 조합

컨테이너 컴포넌트를 결합하여 페이지를 구성

Why CDD

• UI는 규모가 커짐에 따라 다루기 어려움

• 규모가 큰 UI는 꺠지기 쉽고 개발하는데 많은 시간이 걸린다.

• UI를 모듈식으로 세분화하여 견고하고 유연한 컴포넌트를 구성하면 위 문제를 해결할 수 있다.

장점

• 독립적으로 컴포넌트를 분리하고 관련 상태를 정의하여 UI의 다양한 시나리오에서 작동 방식을 확인

• 다자인 시스템의 컴포넌트를 재사용하여 UI를 빠르게 조립하는 식으로 생산성 향상

• UI를 개별 컴포넌트로 분해하여 개발 및 디자인을 병렬처리하여 효율성 높힘

CDD가 아닌 UI 개발

• 웹 사이트를 페이지 모음 정도로 취급하는 디자인 및 개발 프로세스, 디자인 시스템이 없다.

• 페이지에서 공통 요소를 재사용하기 위해 많은 노력을 기울이지 않는다.