컴포넌트가 뭔가여?
컴포넌트는 프로그램의 한 부분을 의미하며 재사용이 가능한 최소 단위를 말한다. 객체지향언어를 사용할 때 자주 사용되며 재사용이 가능하기 때문에 컴포넌트 단위로 분류하거나 이동 가능하다는 특징이 있으며, 컴포넌트를 이용하면 소프트웨어 개발을 마치 레고(Lego) 블록을 쌓듯이 조립식으로 쉽게 할 수 있다.
컴포넌트 기술을 사용하기 이전의 소프트웨어는 독립적으로 개발되지 않고, 독립적으로 개발되어도 다른 모듈과의 호환을 생각하지 않고 개발을 하였습니다. 이는 소프트웨어의 재사용을 어렵게 하고 유지보수 비용이 크게 증가하는 원인이 되었습니다. 이러한 상황에서 소프트웨어의 재사용의 중요성과 필요성을 위해 나온 기술이 바로 컴포넌트 기술이다.
컴포넌트는 소프트웨어 시스템에서 독립적인 업무 또는 독립적인 기능을 수행하는 모듈로 시스템을 유지보수하는데 있어서 교체가 가능합니다. 소프트웨어 컴포넌트는 하드웨어의 그래픽카드와 같은 개념으로 독립적인 기능을 수행하는 소프트웨어 모듈이라고 할 수 있습니다.
Web Component...?!
보통 프론트엔드에서 컴포넌트라고 하면 리액트나 뷰 같은 프레임워크를 이용해서 컴포넌트 단위로 개발을 진행합니다. 그러나 반드시 프레임워크를 이용할 필요는 없습니다.
바닐라 자바스크립트에서 제공하는 Web Component기술을 통해서도 컴포넌트 단위로 개발을 진행할 수 있습니다. 이에 해당하는 대표적인 회사로는 Github가 있으며, 오픈 소스에 의존하지 않고 라이브러리를 바닐라로 직접 만들어 사용하는 팀도 여럿 있습니다.
Custom Elements
Custom Elements는 Web Component의 주요 표준 기술중 하나로 Custom Elements를 이용해서 바닐라 자바스크립트로 컴포넌트를 구성할 수 있습니다.
주의할 점은 반드시 customElements는 HTMLElement를 상속받아야 한다는 점이며, 태그 이름은 케밥 케이스 형식으로 지어야 합니다.
※ What is 케밥 케이스?
모르는 분을 위해 설명하자면, 케밥 케이스는 이름을 짓는 프로그래밍 관습 중 하나로, 케밥 고기를 꼬챙이에 꽂은 것처럼, “-”를 활용하여 단어 간을 연결하여 이름을 짓는 방식입니다.
따라서 이 형식을 무시하고 태그 이름을 지으면 에러가 발생하며 커스텀 요소가 생성되지 않습니다.
만드는 법
1️⃣ 클래스 부분은 마음대로 작명한다.
2️⃣ connectedCallback 함수 안에 축약할 HTML 작성한다.
3️⃣ this.appendChild는 '내가 윗 줄에서 만든 HTML 태그들을 나에게 추가해주세요.' 라는 의미이다.
4️⃣ customElements.define 내가 만든 클래스를 태그 이름과 함께 등록을 할 수 있습니다.
5️⃣ 커스텀 attribute 넣는 것도 가능하다. 이를 통해 다른 attribute를 넣을 때마다 다른 HTML 내용을 보여줄 수 있다. 또한 observedAttributes와 attributeChangedCallback를 사용하면 자동 HTML 재렌더링 기능도 구현 가능하다.
6️⃣ ['name']이라는 attribute가 바뀌는지 감시해 달라는 의미이다.
7️⃣ attribute가 바뀌면 해당 함수가 실행된다. 일종의 리액트 hook과 같은 기능이다. 따라서 해당 코드에서는 attribute가 바뀌면 재렌더링이 된다.
<body>
<custom-input name="250"></custom-input> // 5️⃣
<script>
class CustomInput extends HTMLElement { // 1️⃣
connectedCallback() { // 2️⃣
this.render();
}
render() {
let 라벨입니다 = document.createElement('label');
라벨주세요.innerHTML = '이름을 입력하세요'
this.appendChild(라벨입니다); // 3️⃣
let 인풋창입니다 = document.createElement('input');
this.appendChild(인풋창입니다); // 3️⃣
}
static get observedAttributes() { // 6️⃣
return ['name']
}
attributeChangedCallback { // 7️⃣
this.render();
}
}
customElements.define('custom-input', CustomInput) // 4️⃣
</script>
</body>이외 template, shadow DOM 등을 통해 웹 컴포넌트를 더욱 다양하고 풍성하게 사용하실 수 있습니다.
아니 근데 큰 장점은 없는 거 같네요...?
Web Component는 최신 브라우저에 탑재된 기본 API입니다. 즉, 어떠한 라이브러리, 프레임워크 없이 사용할 수 있다는 장점이 존재합니다.
그 말인즉슨, React든 Vue든, Svelte든, 최근에 인기 있는 어떠한 프레임워크를 사용하든 섞어서 조화롭게 사용할 수 있다는 뜻입니다.
이렇게 한번 규격을 정해놓고 접근성이 갖춰진 컴포넌트를 만들어 놓는다면, 어떤 프레임워크로 만들어진 페이지 프로젝트건 빠르게 접근성이 지켜진 컴포넌트를 만들 수 있다는 겁니다.
인터넷 익스플로러 지원하나요? 호환성을 생각하면 안 좋을 거 같네요.
당연히, 아쉽게도 안 됩니다. 하지만, Internet Explorer는 Microsoft에서도 공식적으로 지원을 중단하였으며, 서비스 종료 절차를 밟고 있습니다.
이에 발맞춰 우리나라의 웹 접근성 업계와 보조기술 업계에서도 Internet Explorer에 맞춰져 있던 지침과 소프트웨어를 최신 브라우저에 맞게 바꾸고 있습니다.
앞으로는 이러한 구형 브라우저 호환성 문제로 인해 쓰지 못했던 API를 더욱 적극적으로 쓸 수 있게 될 겁니다.
감사합니다.
참고 자료
