> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/learning-react-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/learning-react-app/tip-and-references/component-driven-development.md).

# Component Driven Development

## 컴포넌트 주도 개발의 탄생 (2017) <a href="#id-2017-the-birth-of-component-driven-development" id="id-2017-the-birth-of-component-driven-development"></a>

소프트웨어 엔지니어 [Tom Coleman](https://twitter.com/tmeasday)은 컴포넌트 아키텍처 및 프로세스 UI의 개발 변화를 설명하기 위해 [Component Driven Development](https://www.chromatic.com/blog/component-driven-development/)를 소개했습니다. 모듈 UI 개념은 마이크로 서비스, 컨테이너와 같은 소프트웨어 움직임에서 많은 유사점을 가지고 있습니다. 이 방법은 20세기 경 희박한 제조와 대량 제조에서 기인한 것입니다.

![](/files/-MVT1vZPyLZ7S45UoX0f)

![](/files/-MVT5CRnDljiB3WMa06k)

## 컴포넌트 주도 개발 (CDD)

컴포넌트를 모듈 단위로 개발하여 사용자 인터페이스(UI) 구축에 도달하는 개발 및 설계 방법론입니다. 기본적인 컴포넌트 단위부터 시작하여 UI 뷰(view)를 구성하기 위해 점진적으로 결합(조립)해가는 **상향적(bottom-up)** 성향을 띕니다.

{% hint style="info" %}

#### 컴포넌트란?

상호 교환 가능하고 표준화 된 UI 구성 요소입니다. UI 조각의 모양, 기능을 캡슐화합니다. LEGO 벽돌을 떠올려 보세요. LEGO는 성에서 우주선에 이르기까지 모든 것을 만드는 데 사용할 수 있습니다.
{% endhint %}

이 방법은 UI를 구축할 때 직면하게 되는 앱 규모의 복잡성을 해결합니다. [Storybook](/learning-react-app/tip-and-references/storybook-for-react.md)은 독립 된 환경에서 UI를 개발 할 수 있는 환경을 제공하므로 다음의 스토리(Story)를 구성하는 데 활용할 수 있습니다.

* **컴포넌트**(**components**)
* **컨테이너**(**containers**, 2개 이상 컴포넌트 조합)
* **페이지**(**pages**, 2개 이상 컨테이너 조합)

![componentdriven.org](/files/-MVSyVKdBKiTNM1cLgPO)

{% hint style="warning" %}
테스트 중심의 개발 방법론인 "[테스트 주도 개발(TDD)](https://m.blog.naver.com/suresofttech/221569611618)"과는 사용 목적이 다릅니다.
{% endhint %}

## 왜 컴포넌트인가? <a href="#why-component" id="why-component"></a>

오늘 날 사용자 인터페이스는 그 어느 때보다도 복잡합니다. 사람들은 다양한 기기에서 제공되는 매력적이고 보다 개인화 된 경험(UX)을 기대합니다. 즉, 프론트 엔드 개발자와 디자이너는 UI에 보다 많은 로직을 포함해야 한다는 의미입니다.

하지만 UI는 애플리케이션 규모가 커짐에 따라 다루기 어려워집니다. 규모가 큰 UI는 깨지기 쉽고 디버깅이 어려울 뿐더러 제작에도 많은 시간이 필요합니다. UI를 모듈 식으로 세분화하여 견고하면서도 유연한 컴폰넌트를 구성하면 이러한 문제를 해결할 수 있습니다.

컴포넌트는 애플리케이션 [비즈니스 로직](https://m.blog.naver.com/anjdieheocp/20117559228)에서 상태를 분리하여 상호 교환([interchangeability](https://en.wikipedia.org/wiki/Interchangeability_\(computer_science\)))을 가능하게 합니다. 이렇게하면 복잡한 화면을 간단한 컴포넌트로 분해 할 수 있습니다. 각 컴포넌트에는 잘 정의된 API와 목([mock](https://ko.wikipedia.org/wiki/%EB%AA%A8%EC%9D%98_%EA%B0%9D%EC%B2%B4)) 구성된 일련의 상태(정적)가 있습니다. 이를 통해 컴포넌트를 분리하고 재구성하여 다른 UI를 구축 할 수 있습니다.

## CDD 장점 <a href="#cdd-benefits" id="cdd-benefits"></a>

### 품질 (**Quality)**

독립적으로 컴포넌트를 분리하여 관련 상태를 정의하여 UI가 다양한 시나리오에서 작동하는 지 확인 가능합니다.

### 내구성 (**Durability)**

컴포넌트 수준에서 테스트하여 세부 사항까지 버그를 정확하게 찾아낼 수 있습니다. 테스트 보다 작업량이 적습니다.

### 속도 (**Speed**)

컴포넌트 라이브러리 또는 디자인 시스템의 컴포넌트를 재사용하여 UI를 보다 빠르게 조립할 수 있습니다.

### 효율성 (**Efficiency**)

UI를 개별 컴포넌트로 분해 한 다음 서로 다른 팀 구성원 간에 공유하여 개발 및 디자인을 병렬 처리합니다.

## CDD가 아닌 UI 개발 <a href="#what-uis-are-not-component-driven" id="what-uis-are-not-component-driven"></a>

다음의 경우 컴포넌트 주도 개발 방식의 UI가 아닙니다.

### **페이지 기반** <a href="#page-based" id="page-based"></a>

웹 사이트를 페이지 모음으로 정도로 취급하는 개발 및 디자인 프로세스입니다. 페이지에서 공통 요소를 재사용하기 위해 많은 노력을 기울이지 않습니다.

### **페이지용으로 설계 된 도구** <a href="#tools-designed-for-pages" id="tools-designed-for-pages"></a>

Wordpress 또는 Drupal은 문서를 화면에 렌더링 하는 데 중점을 둔 도구입니다. Rails, Django 및 PHP와 같은 백엔드 프레임워크는 UI 재사용을 사후 고려사항으로 간주하고 광범위한 컴포넌트 재사용을 방지합니다.

## 상호 보완 트렌드 <a href="#complementary-trends" id="complementary-trends"></a>

### **디자인 시스템** <a href="#design-systems" id="design-systems"></a>

에셋(Figma, Sketch 등), 설계 원리, 컴포넌트 라이브러리를 포함하는 모든 UI 패턴 사용자 인터페이스 설계에 대한 전체적인 접근 방식입니다.

### **애자일** <a href="#agile" id="agile"></a>

짧은 피드백 루프와 빠른 반복을 촉진하는 소프트웨어 개발 방법입니다. 컴포넌트는 미리 만들어진 빌딩 블록을 다시 사용하여 팀이 보다 빨리 구축하는 것을 도와줍니다. 이를 통해 애자일 팀은 사용자 요구 사항에 더욱 더 집중할 수 있습니다.

### **JAMStack**

정적 파일을 사전 렌더링하고 CDN에서 직접 제공하는 웹 사이트를 구축하는 방법론입니다. JAMStack 사이트 UI는 컴포넌트화 된 JavaScript 프레임 워크에 의존합니다.