컴포넌트(Component)란

컴포넌트란

컴포넌트의 개념

컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다.

그림에서 확인 할 수 있듯이 컴포넌트 기반 프로그래밍을 하면 마치 레고 블록처럼 이미 만들어진 컴포넌들을 조합하여 화면을 구성할 수 있다.

웹 컴포넌트는 이러한 컴포넌트 기반 프로그래밍을 웹에서도 적용할 수 있도록 W3C에서 새로 정한 규격이다. 웹 표준을 기반으로 구축되었으며, 최신 부라우저 및 모든 JavaScript 라이브러리, 프레임워크에서도 사용할 수 있다.

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

웹 컴포넌트의 규격

Shadow DOM : DOM과 스타일을 캡슐화하여 메인으로부터 독립적으로 스크립트와 스타일을 처리
Custom Elememts : HTML에 새로운 HTML/DOM 요소를 정의할 수 있는 JavaScript API
HTML Templates : 문서가 처음 로드될 때는 비활성화된 상태이지만, JavaScript를 사용하는 런타임에 나타나는 HTML 조각
ES Modules : 이전 규격이었던 HTML Import를 대체하여 나온 규격이며, 자바스크립트로 구현하는 모듈 시스템

위의 4가지 규격을 함께 사용하는 것이 가장 이상적이지만, 사용하고 싶은 부분만 선택적으로 사용하는 것도 가능하다.

폴리머

폴리머는 대표적인 웹 컴포넌트 라이브러리 중 하나로, 구글에서 제공한다. 폴러머를 이용하면 재사용 가능한 웹 컴포넌트 생성이 가능하다.

컴포넌트 개념의 유래

많은 하드웨어 제품들은 각각 독립된 기능을 가진 모듈로 만들어진다. 이 제품들은 회사 상관없이 서로 조합하여 하나의 제품으로 만들어진다. 이러한 제품들의 부품은 문제가 발생했을 때 해당 부품만 다른 부품으로 바꿔도 제품은 문제없이 작동한다. 컴퓨터와 스마트폰과 같은 제품들을 상상해보면 금방 이해가 갈 것이다.

반면 소프트웨어에서는 상황이 다르다. 소프트웨어는 독립적으로 개발되지 않은 경우가 많을 뿐더러 독립적으로 개발되었다해도 다른 모듈과의 호환을 생각하지 않고 개발하면 이는 결국 소프트웨어의 재사용을 어렵게 하고 유지보수 비용이 크게 증가하는 원인이 된다. 이러한 상황에서 소프트웨어의 재사용의 중요성과 필요성을 위해 나온 기술이 컴포넌트 기술이다.

독립적인 단위 모듈인 컴포넌트

하드웨어처럼 독립적인 기능을 수행하고 추후에 교환될 수 있도록 해야한다. 또한 컴포턴트의 세부사항은 겉으로 드러나선 안되는 것이며, 일부러 끄집어 내려는 시도조차하지 말아야한다. 필요한 것은 단지 해당 컴포넌트를 쓰기 위해 제공해주는 일종의 ‘장치’가 필요하다. 예를들어 스마트폰의 베터리 수명이 다했을 경우 베터리를 새로 구입하여 스마트폰에서 베터리만 교체했을 것이다. 이때 스마트폰 단자와 베터리 단자가 맞물려야 제 기능을 발휘하는데 이때 베터리 단자가 앞서 말했던 일종의 ‘장치’가 된다.

객체지향 언어에 대입하는 컴포넌트

스마트폰과 베터리가 각각 독립적으로 문제없이 돌아간다고 가정할때 상호간의 단자만 규격에 맞을 시 어떠한 배터리를 교환하더라도 스마트폰은 정상 작동할 것이다. 이와 같이 소프트웨어에서도 단자와 같은 일종의 장치가 필요하다. 객체지향 언어에서는 이러한 장치를 인터페이스(Interface)로 제공해준다. 인터페이스는 사용자에게 해당 소프트웨어를 쓰기위한 메소드(=장치)를 공개하고, 규격화된 메소드 환경에서 소프트웨어를 개발할 수 있는 환경을 제공해준다. 이렇게 함으로써 객체지향 개념은 정보은닉개념을 수행할 수 있을 뿐더러 각각 독립된 모듈로 소프트웨어를 만들 수 있도록 크게 이바지 할 수 있다.

결론적으로 컴포넌트는 각각 독립된 모듈을 뜻하며, 이는 흔히 JAVA같은 oop 언어등의 class등의 개념과는 다르다. 하나의 컴포넌트는 하나의 클래스로만 작성될 수도 있지만, 여러개의 클래스로도 작성될 수 있기 때문이다. 컴포넌트 개념을 잘 적용한 소프트웨어란 부품(인터페이스를 구현받는 클래스)만 바꾸어주었을 시 오류없이 잘 작동되는 것을 의미한다.

정리

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

컴포넌트를 한마디로 표현하자면 소프트웨어 시스템에서 독립적인 업무 또는 독립적인 기능을 수행하는 ‘모듈’로서 이후 시스템을 유지보수 하는데 있어 교체 가능한 부품이다.

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

컴포넌트의 정의나 형태는 관점에 따라 다양하게 존재하지만 재사용 부품으로서의 컴포넌트가 되기 위해서는 아래의 내용을 만족해야한다.
1. 소스코드(soure code)가 아닌 실행코드(execute code) 기반으로 재사용할 수 있도록 이미 구현(implemetntation)이 완료되어 있어야만 한다.
2. 컴포넌트는 해당 컴포넌트의 용도, 유형, 기술표준과 인터페이스등에 대한 정보들에 대해서 명세화(specification)되어 있어야만 한다.
3. 교체가능한 컴포넌트를 개발하기 위해서는 표준(standard)을 준수하여 개발해야한다.
컴포넌트가 개발되어 배포될 때 관련 문서와 코드들이 독립적인 단위로 패키지화(packaing)되어 있어야만 한다.
4. 컴포넌트는 독립적인 업무단위로 개발된 것이므로 사용자가 필요한 기능만을 패키지한 컴포넌트를 재사용할 수 있도록 독립적으로 배포(deployment) 가능해야만 한다.

3. 하나의 컴포넌트는 하나 이상의 클래스로 구성될 수 있다

컴포넌트와 클래스는 다른 개념이며, 컴포넌트와 객체 또한 다른 개념이므로 컴포넌트가 되기 위해서 반드시 클래스나 객체로 만들어야 한다는 것은 아니다. 기존의 C나 Cobol로 개발된 모듈 또한 컴포넌트로 만들 수 있으나 현재의 컴포넌트 기술 표준들과 핵심개념들이 객체지향에서 비롯된 개념들이 많아 컴포넌트를 개발하는데 있어 객체지향 기술을 바탕으로 하는 것이 보다 효과적일 수 있다. 하나의 컴포넌트를 개발하기 위해서는 하나 이상의 클래스들을 바탕으로 개발할 수 있으며 이렇게 개발된 컴포넌트가 실행될 때 해당 컴포넌트 인스턴스(Instance)인 컴포넌트 객체가 수행된다. 이때 컴포넌트 내부에는 하나 이상의 클래스에 대응하는 하나 이상의 객체들이 수행되고 있는 것이라고 생각할 수 있다.

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

컴포넌트내의 정보는 외보로부터 모두 숨겨진다.(은닉)
따라서 외부에서 접근할 수 있도록 컴포넌트가 제공하는 서비스를 정의한 인터페이스만을 제공하고 컴포넌트를 사용하기 위해서는 어떤 인터페이스를 사용해야 하는지만을 알 수 있다.
따라서 인터페이스 외부와의 연결을 위해 반드시 존재해야만하며, 이처럼 컴포넌트가 내부 정보를 숨기고 인터페이스만 제공함으로써 소프트웨어도 하드웨어처럼 조립 기반으로 갈 수 있게 되는 것이다.

참조문서
https://www.webcomponents.org
https://d2.naver.com/helloworld/188655
https://developer.mozilla.org/ko/docs/Web/Web_Components
https://mommoo.tistory.com/55