[ES6] 13. Web Components

Web Component

브라우저 기본 기능인 Web Component를 자바스크립트로 구현할 수 있다
React 공부할때 때 자주 다뤘더 컴포넌트라 반가웠지만 리액트랑은 다른 스타일에 조금 당황스러웠다

---

1. 커스텀 html 태그 만들기

< custom-input > 컴포넌트 만들기

class inputbox extends HTMLElement {

   connectedCallback() {
      this.innerHTML = '<label>이름입력</label><input>'
   }
}

customElements.define("custom-input", inputbox);

• connectedCallback() 함수는 컴포넌트가 html에 장착될 때 실행된다
• html 문법을 작성하고
• customElements.define()을 써주시면 컴포넌트 등록이 완료된다

그리고 컴포넌트를 html 태그로 입력하면 된다

<custom-input></custom-input>

2. 속성 추가

리액트에서 props라고 부르는 attribute를 추가할 수도 있다

class inputbox extends HTMLElement {

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

customElements.define("custom-input", inputbox);

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

3. attribute가 변경될 때 특정 코드 실행하기

React는 자동 html 재렌더링 기능이 있는데 이것을 자바스크립트로도 구현 가능하다

class inputbox extends HTMLElement {

   connectedCallback() {
     let name= this.getAttribute('name');
     this.innerHTML = `<label>${name}인풋</label><input>`;
   }
  // name 속성이 바뀔 때마다 체크해달란 뜻
  static get observedAttributes() {
       return ['name']
   }
   attributeChangedCallback() {
       this.innerHTML = `<label>${name}인풋</label><input>`;
   }
}

customElements.define("custom-input", inputbox);

새로고침없이도 html에 변경사항을 바로바로 반영할 수 있게 된다