웹 구성 요소 3부 - 수명 주기 기능

웹 구성 요소란?

주요 프론트엔드 프레임워크(Angular, Vue, React)에서는 사용자 인터페이스의 일부를 <component/> 와 같은 태그로 캡슐화할 수 있습니다. 최근 몇 년 동안 기본적으로 그렇게 하는 기능이 Native Web Components API의 형태로 Javascript 브라우저 API에 추가되었습니다. 이 시리즈에서는 웹 구성 요소를 구축하는 다양한 측면을 살펴봅니다. MercedUI, ComponentZoo, FunComponent 및 AMPonent와 같이 이 프로세스를 훨씬 쉽게 만드는 몇 가지 라이브러리를 만들었습니다.

http://alexmercedcoder.com/jslib/에서 내 라이브러리 찾기

내 웹 구성 요소 비디오 재생 목록:

우리가 그만둔 곳

이 자습서에서는 이전 두 자습서의 빌드를 계속 진행하지 않고 웹 구성 요소 클래스에서 재정의할 수 있는 몇 가지 추가 내장 함수에 대해 살펴봅니다.

예시

class MyComponent extend HTMLElement {
  constructor(){
    super()
  }

  static get observedAttributes(){return ['prop1','prop2']}

  connectedCallback(){
    console.log('I run when the component is rendered')
  }

  disconnectedCallback(){
    console.log('I run when the component is removed from the DOM')
  }

  changedAttributeCallback(name, oldVal, newVal){
    switch(name){
      case 'prop1':
        console.log('I run when the prop1 attribute is changed');
        break;
      case 'prop2':
        console.log('I run when the prop2 attribute is changed');
        break;
    }
  }
}

위의 console.logs를 읽으면 이러한 각 기능이 수행하는 작업이 명확해야 합니다. 페이지에 iframe이 있고 구성 요소를 기본 문서에서 iframe 문서 중 하나로 이동하는 경우 실행되는AdaptedCallback도 있습니다.