JavaScript(커스텀 html 태그 만들기)

■ 커스텀 html 태그 만들기

// class로 원하는 html 요소 만들기
class 클래스 extends HTMLElement {

   // connectedCallback()은 컴포넌트가 장착될 때 실행되는 함수
   connectedCallback() {
      this.innerHTML = '<label>이름을 입력하쇼</label><input>'
   }
}

// 만든 클래스를 넣어서 컴포넌트 등록
customElements.define("custom-input", 클래스);

// 컴포넌트 적용
<custom-input></custom-input>

1. HTML 요소의 이름 정의 : 커스텀 태그의 이름을 지정합니다. 작명 시에는 보통 대시(-) 기호를 넣는게 관습입니다.

 

2. 사용자 정의 요소 만들기 : HTMLElement를 상송하는 클래스를 생성하고 필요한 기능을 구현합니다.

 

3. 등록하기 : customElements.define() 메서드로 커스텀 태그(컴포넌트)를 등록합니다.

 

 

■ attribute 추가하여 다른 내용 보여주기

class 클래스 extends HTMLElement {

   connectedCallback() {
      let name = this.getAttribute('name');
      this.innerHTML = '<label>${name}을 입력하쇼</label><input>'
   }
}

customElements.define("custom-input", 클래스);

<custom-input name="이메일"></custom-input>
<custom-input name="비번"></custom-input>

getAttribute(X)를 쓰면 X 라고 정의된 attribute를 가져올 수 있습니다.

위의 예제를 보면 name attribute를 가져와서 <label>태그 안에 넣은 것을 볼 수 있습니다.

그리고 label 태그 내용의 변경하면 태그 안의 name 요소도 함께 변하게 됩니다.

 

 

 

■ attribute 변경될 때 특정 코드 실행하기

class 클래스 extends HTMLElement {

   connectedCallback() {
      let name = this.getAttribute('name');
      this.innerHTML = '<label>${name}을 입력하쇼</label><input>'
   }

   static get observedAttributes() {
       return ['name']
   }
   attributeChangedCallback() {
       (attribute 변경시 실행할 코드)
   }
}

customElements.define("custom-input", 클래스);

1. static get observedAttributes() 안에 감시할 attribute 들을 array로 적습니다.

 

2. 감시되는 attribute 들이 변경되는 순간 arrributeChangedCallback() 함수가 실행됩니다.