Component(컴포넌트)

Component : (구성) 요소, 부품

컴포넌트는 프로그래밍에 있어서 재사용이 가능한 각각의 독립된 모듈이다.

레고로 비유하자면 레고 조각(Component)들을 조합해서 하나의 레고 모형(Object)를 만든다고 할 수 있다.

웹 컴포넌트는 컴포넌트 기반의 프로그래밍을 웹에서도 적용할 수 있도록 W3C에서 새롭게 정한 규격이다.

웹 컴포넌트는 최신 브라우저, JavaScript라이브러리, Framework에서도 사용할 수 있다.

웹 컴포넌트를 이용해서 코드를 작성하면 Vue.js, React.js와 같이 라이브러리, 프레임워크에 의존하지 않고 상호 운용이 가능하게끔 작성할 수 있다.

핸드폰에서 배터리 수명이 다 되었을 경우 오래된 배터리(예전 장치)만 분리하여 새로운 배터리(새로운 장치)로 교체하듯이 객체지향 언어에서도 이러한 장치들을 인터페이스로 제공한다.

인터페이스는 해당 소프트웨어를 쓰기위한 장치(메소드)를 공개하고, 규격화된 메소드 환경에서 소프트웨어를 개발할 수 있는 환경을 제공한다.

따라서 컴포넌트(모듈)를 잘 적용한 소프트웨어는 문제가 있는 장치(인터페이스 구현받는 클래스)만 바꾸었을 때 오류없이 잘 작동되어야 한다.

컴포넌트 별로 관심사를 분리하면 확장성과 재사용성을 높일 수 있다.

컴포넌트는!!

1. 컴포넌트는 독립적인 소프트웨어 모듈이어야 한다.

2. 컴포넌트는 구현, 명세화, 패키지화, 배포 될 수 있어야 한다.

3. 컴포넌트는 표준을 준수하여 개발되어야 한다.

4. 한 개의 컴포넌트는 한 개 이상의 클래스로 구성될 수 있다.

5. 컴포넌트는 인터페이스를 통해서만 접근할 수 있다.

컴포넌트의 종류

page : 모든 구성요소를 포함하는 가장 큰 단위 single template과 multi-page template이 있다.

dialog : 대화상자

header bar : 상단에 상단에 위치하면서 제목을 표시하고 페이지 이동과 관련된 버튼이 위치한다.

footer bar : 페이지 하단에 위치하면서 버튼이 위치한다.
navbars : 일반적으로 header bar 나 footer bar 내에 위치하면서 특정한 페이지로 이동하는 메뉴의 역할
button : 버튼
form : 사용자로부터 데이터를 입력받는 컨트롤
list view : 여러개의 항목을 열거하는데 사용되는 컨트롤

참조

컴포넌트(Component)란? - HANAMON

[Web] 웹 컴포넌트란

컴포넌트(Component)란? - 개발자로 홀로 서기

컴포넌트 정의 - 컴포넌트란 무엇인가?

컴포넌트(Component) - 생활코딩