JS중급_웹 컴포넌트

▶️ 웹컴포넌트 문법

  <script>
      class customClass extends HTMLElement {
          connectedCallback() {
              // backtick 사용(반드시 backtick을 사용할 필요는 없다.)
              // custom tag가 HTML에 장착될 때 실행할 코드를 적는 곳(축약할 HTML 내용을 담는다.)
              // 여기서 this는 custom tag이다.(this = <custom-input>)
              this.innerHTML =   `<label>이름을 입력해라</label>
                                  <input>
                                  <br>
                                  `;

              // 이런식으로 해도 된다. 이게 더 효율적인 방식이다. 
              let labelEle = document.createElement('label');
              labelEle.innerText = "document.createElement로 만든 <label> 태그";
              this.appendChild(labelEle);
          }
      }

      customElements.define("custom-input", customClass);
      // customElements.define("축약할 단어(Component 명)", 축약할 HTML 내용을 담은 class);
      // 반드시 class 형태로 집어넣어야 한다.
  </script>

  <custom-input></custom-input>

• html 코드를 짜다보면 div 들이 매우 많아 귀찮은 경우가 있다. 그럴 땐 여러개의 div 태그들을 하나의 단어로 축약할 수 있는 Web Component 라는 문법을 쓰면 된다.
• 약간의 class 문법만 알고 있다면, 복잡한 html 태그들을 축약해서 사용이 가능하다.

  <script>

  </script>

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

• getAttribute(x)를 쓰면 현재 요소의 x라고 정의된 attribute를 가져올 수 있다.

    class customClass2 extends HTMLElement {
          connectedCallback() {
              let name=this.getAttribute('name');
              this.innerHTML =   `<label>${name}을 입력하거라</label><input><br>`;
          }
         static get observedAttributes(){
         	return ['name'];
         }
         attributeChangedCallback(){
         	//실행시 변경할 코드
         }
      }
     customElements.define("custom-input2", customClass2);

-attribute가 변경될 때 특정 코드를 실행할 수도 있다.

• static get obsevedAttributes()안에 감시할 attribute들을 array로 적으면 된다. 그러면 변경되는 순간 attributeChangedCallback()함수를 실행해준다.