[Reference] Component Driven User Interfaces

카테고리 : etc
태그: refer · Component Driven · components · 컴포넌트화 이유
등록일: 2023년 09월 19일
최근 업데이트: 2023년 09월 19일

---

• 1. Component Driven User Interfaces
• 2. Why components?
• 3. How to be Component Driven
• 4. Component Driven의 이점
• 5. 컴포넌트 기반이 아닌 UI

1. Component Driven User Interfaces

모듈화된 컴포넌트로 사용자 인터페이스를 구축하는 개발 및 디자인 접근 방식. UI는 기본 컴포넌트부터 시작하여 점진적으로 조합하여 화면을 구성하는 상향식으로 화면을 조립함

---

2. Why components?

현대 사용자 인터페이스는 그 어느 때보다도 복잡해졌습니다. 사용자들은 다양한 기기에서 제공되는 효과적이고 맞춤화된 경험을 원합니다. 이로 인해 프론트엔드 개발자와 디자이너들은 UI에 더 많은 로직을 통합해야 합니다.

하지만 애플리케이션이 커질수록 UI를 다루기가 어려워집니다. 대규모 UI는 출시에 많은 시간이 걸리며, 디버깅이 어렵고 복잡합니다. 이러한 문제를 해결하기 위해 UI를 모듈화된 방식으로 조립하면 유연하면서도 견고한 UI를 쉽게 구축할 수 있습니다.

컴포넌트는 상태를 애플리케이션 비즈니스 로직과 분리함으로써 상호 교환성을 가능하게 합니다. 이렇게 하면 복잡한 화면을 간단한 컴포넌트로 분해할 수 있으며, 각 컴포넌트는 명확한 API와 고정된 상태 시퀀스를 가지고 있습니다. 이를 통해 컴포넌트는 필요에 따라 분해하고 재조합하여 다양한 종류의 UI를 구축할 수 있습니다.

---

3. How to be Component Driven

1. 한 번에 하나의 컴포넌트를 만들기 : 각 컴포넌트를 독립적으로 만들고 관련 상태를 정의
2. 컴포넌트를 결합하기 : 작은 컴포넌트를 함께 조합하여 새로운 기능을 활성화
3. 페이지 결합: 복합 컴포넌트를 결합하여 페이지 구축
4. 프로젝트에 페이지를 통합 : 데이터를 연결하고 비즈니스 로직을 연결하여 앱에 페이지를 추가

---

4. Component Driven의 이점

• 품질 향상 : 컴포넌트를 독립적으로 구축하고 관련 상태를 정의함으로써 다양한 시나리오에서 UI가 작동하는지 확인하여 품질을 확보
• 내구성 향상 : 컴포넌트 수준에서 테스트를 진행하여 세부 사항까지 버그를 정확하게 파악할 수 있습니다. 화면을 테스트하는 것보다 더 적은 작업으로 더 정밀한 결과를 얻을 수 있다
• 속도 향상 : 컴포넌트 라이브러리나 디자인 시스템에서 기존 컴포넌트를 재사용하여 UI를 빠르게 조립할 수 있다
• 효율성 향상 : UI를 독립적인 컴포넌트로 분해하고 다양한 팀 구성원 사이에 작업을 공유하여 개발과 디자인을 병렬로 진행할 수 있다

---

5. 컴포넌트 기반이 아닌 UI

• 페이지 기반 : 웹사이트를 페이지의 집합으로 처리하는 개발 및 디자인 프로세스 ( 재사용을 하지 않음)
• 페이지 지향 도구 : 문서 표시를 중점으로 하는 도구들로, WordPress와 Drupal과 같은 것