클라이언트 기반 웹 음성 편집기 프로젝트를 하면서 vanillaJS로 진행했다.
이건 뭐 폴더 구조같은게 없으니까 막막했는데 팀원 중에 한 분이 자신이 예전에 react처럼 컴포넌트 형식으로 개발 해본적이 있다고 해서 프로젝트에 적용하기로 했다.
그게 바로 custom components이다.
custom components를 설명하기 전에 Web Component에 대해 설명을 해본다.
Web Component
web component는 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음이다.
그 중 Custom Elements에 대해서 적어보려한다.
Custom Elements란?
- 일반적인 마크업 구조에선 컴포넌트를 재사용하기 어렵다. 이런 단점을 해결하기 위해 HTML Element와 JavaScript Class를 하나로 만들어서 컴포넌트를 캡슐화하여 쉽게 이용할 수 있게 한다.
- 사용자 지정 태그를 작성할 수 있다. 개발을 하다 보면 특별한 의미가 없으면 어쩔 수 없이 div 태그를 많이 쓰게 되는데 custom elements를 사용하면 자신이 원하는 태그 이름을 만들 수 있다.
Custom Elements 사용법
Custom Elements는 앞에서도 말했듯이 컴포넌트처럼 사용할 수 있다!
class TestModal extends HTMLElement {
constructor() {
super();
}
...
}
customElements.define('test-modal', TestModal);
- Custom Elements를 사용할 Class는 반드시 HTMLElement를 상속 받아야한다.
- Custom Elements에는 React와 비슷하게 생명주기가 존재한다. 이는 뒤에서 자세히 설명을 하겠다.
customElements.define을 이용해서 Custom Elements를 만들 수 있다. 첫번째 인자는 태그의 이름을 적어주면 되고 두번째 인자는 해당 Class의 이름을 적으면 된다. 이때 태그의 이름엔 반드시-가 들어가야한다.
왜 Custom Elements는 태그 이름에 -가 들어가야할까?
앞에서 태그 이름을 지정해줄땐 -가 꼭 들어가야한다고 했는데 왜 그럴까?
HTML파서가 JS에서 선언된 Custom Elements를 모르는 상황에서도 Custom Element가 될지도 모르는 태그들을 구분하기 위해서이다!
HTML 표준에 정의되지 않으면서 Custom Elements가 아닌 태그일 경우엔 HTMLUnknownElement를 상속 받는다고한다. 하지만 Custom Elements들은 HTMLElement를 상속 받아야하기 때문에 -를 붙여 구분하고 제대로 상속 받을 수 있게 한다.
Custom Elements의 생명주기
React와 비슷하게 생명주기를 가지고 있다.
- connectedCallback
- disconnectedCallback
- attributeChangedCallback
- adoptedCallback
connectedCallback
커스텀 엘리먼트가 DOM에 등록되었을때 실행되는 함수이다.
나 같은 경우는 프로젝트할 때 주로 화면을 그려주거나 DOM search하는 함수, 이벤트를 등록하는 함수들을 불러와서 사용을 했다.
disconnectedCallback
커스텀 엘리먼트가 DOM에서 삭제되었을때 실행되는 함수이다.
한 번 생성된 객체는 자동으로 삭제되지 않기 때문에 직접 삭제를 해줘야한다.
프로젝트에서도 비슷한 이슈가 존재했는데 resize 이벤트가 실행될때마다 다시 렌더링해주는 함수를 넣어뒀는데 store에 등록된 이벤트가 사라지지않아 이벤트가 중첩으로 실행되는 이슈가 있었다.
그래서 disconnectedCallback에 이벤트 등록을 취소하는 함수를 선언하여 이벤트 중복을 막도록했다.
attributeChangedCallback
속성이 변경될 때 마다 실행된다. 이때 observedAttributes를 생성자 내부에서 호출하여 수행된다.
static get observedAttributes(){
return ['type'];
}adoptedCallback
사용자 정의 요소가 새 문서로 이동 될 때 호출됩니다. 자주 쓸 일은 없다고 한다.
참고
