우아한 테크 캠프의 두번째 프로젝트 <투두 리스트 만들기!>

투두 리스트에는 재사용되는 카드와 컬럼 등의 컴포넌트들이 있는데, 이들이 가지고 있는 데이터와 뷰를 어떻게 관리하면 좋을지에 대해 고민하였습니다.

결론은, WebComponent의 Custom Element 방식을 사용해서 재사용 할 수 있는 컴포넌트를 구현하기로 하였습니다!

Web Component란?

뭘까..? 🤔

웹 컴포넌트는 HTML, CSS, JavaScript를 사용하여 재사용 가능한 컴포넌트를 만들기 위해 사용되는 4개의 표준을 묶어서 부르는 이름입니다.

HTML과 작동하는 모든 JavaScript 라이브러리와 React, Vue 등 프레임워크에서 함께 사용할 수 있습니다.

Custom Element, Shadow DOM, HTML Template, ES Modules

이 네 가지로 이루어져 있습니다.

이 중, Custom Element 방식을 사용하여 컴포넌트를 만들기로 했습니다ㅎㅅㅎ

Custom Elements

커스텀 앨리먼트는 사용자가 새로운 타입의 HTML element를 정의하는 것입니다. 또한 HTML의 앨리먼트를 캡슐화하여 사용자가 웹 앱에서 확장하여 재사용할 수 있도록 기능을 제공합니다.

커스텀 앨리먼트를 사용함으로써 얻을 수 있는 특징은 다음과 같습니다.

• 캡슐화

  메인 어플리케이션과 완벽히 분리된 컴포넌트

• 확장성

  다른 앨리먼트로 부터의 확장이 가능하며, 기존의 DOM API 확장이 가능하다.

• 재사용성

  재사용이 가능하다.

뿐만 아니라 커스텀 앨리먼트는 생명주기도 갖고 있어 앨리먼트의 상태에 따라 수행하는 코드를 작성할 수 있습니다.

1. 커스텀 앨리먼트 생성하기

커스텀 앨리먼트를 생성하는 기본적인 방법은 아래와 같습니다.