Component Driven Development ?
CDD는 웹사이트, 웹 APP를 개발할 때 Component라는 최소 단위(부품)를 토대로 개발하는 방법론을 의미한다. 이때, 모듈 단위로 개발된 컴포넌트는 사용자 인터페이스(UI) 구축을 위해 상향식(bottom-up) 으로 결합된다.
예시로, 개발자 A는 현재 생수 브랜드의 웹사이트 론칭 프로젝트에 참여하고 있다. 개발 기간의 절반을 투자하여 A의 팀원들은 웹사이트를 제작했으나 이후 의뢰사의 요청으로 APP에 새로운 기능을 추가해야 한다.
이때, 추가될 기능이 기존 기능과 유사하다면 A는 어떤 선택을 할 수 있을까?
1) 새로 만든다.
2) 기존의 코드를 재사용한다.
3) 하기 싫다고 땡깡 부린다.
여기서 가장 효율적인 방법은 '2) 기존의 코드를 재사용한다.' 이다.
이처럼, 예상치 못한 상황 혹은 여러가지 사유로 발생하는 소요에 대응하기 위해 개발자는 코드의 재사용성을 극대화할 필요가 있고, Component 단위 개발을 기반으로 하는 CDD는 단순히 나열된 코드를 재사용하는 것을 넘어서,
기능의 단위를 Component로 분리하고, 코드를 모듈화하여 단순화 시키고 효율을 극대화하는 것이다.
Component ?
컴포넌트는 상호 교환 가능하고 표준화된 UI 구성 요소 이다. UI 조각의 모양, 기능을 캡슐화 한다. LEGO 벽돌을 떠올려봤을 때, LEGO는 성에서 우주선에 이르기까지 모든 것을 만드는 데 사용할 수 있다. - 야무의 React 러닝 가이드 中
이는 아무리 복잡한 성과 우주선을 만든다고 하더라도, 그 근본은 LEGO 블럭 한조각임을 의미한다.
오늘날, 웹개발 기술이 발달함에 따라 웹 APP는 굉장히 다양하고 복잡한 기능을 수행할 수 있게 됐다. 또한, 이러한 기술들을 사용자가 이용하기 위한 UI의 규모가 커지고 어려워지는 것은 당연하다.
이렇게 규모가 커진 UI는 문제가 생기기 쉽고 제작에도 큰 시간을 필요로 한다.
이때, Component는 웹 APP의 복잡한 화면을 아주 작고 단순한 단위로 분해하여 단순화 시킬 수 있고 이는 각각의 컴포넌트 기능에만 집중 할 수 있음을 의미한다.
또한, 컴포넌트를 분리하고 재구성하여 다른 UI를 구축할 수도 있다(재사용성).
CDD의 장점
| 항목 | 설명 |
| 품질 (Quality) | 각 컴포넌트는 독립적으로 존재하며 State를 통해 다양한 시나리오의 동작을 확인해볼 수 있다. |
| 내구성 (Durability) | 복잡한 UI라도 작은 Component 기준에서 테스트하여 보다 정확하게 디버깅 할 수 있다. |
| 속도 (Speed) | 컴포넌트 라이브러리를 재사용하여 UI를 보다 빠르게 조립하고 개발할 수 있다. |
| 효율성 (Efficiency) | 독립적인 컴포넌트로 구성된 UI는 다른 팀에도 공유될 수 있다. 이는 개발 및 디자인의 병렬 처리를 의미한다. |
