Component 란?

Component

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

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

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

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

컴포넌트 개념의 유래

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

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

컴포넌트는 독립적인 단위 모듈이다.

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

컴포넌트 개념을 객체지향 언어에 대입

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

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