[javascript] 웹 컴포넌트의 라이프사이클 이벤트 활용 방법

07 Dec 2023

javascript

웹 컴포넌트는 웹 애플리케이션에서 재사용 가능한 UI 요소를 만들기 위한 표준 기술입니다. 이러한 웹 컴포넌트는 라이프사이클 이벤트를 제공하여 컴포넌트의 생성, 업데이트, 제거 등의 단계에서 작업을 수행할 수 있습니다. 이번 포스트에서는 웹 컴포넌트의 라이프사이클 이벤트를 활용하는 방법에 대해 알아보겠습니다.

1. 컴포넌트의 생성과 제거

created 이벤트

웹 컴포넌트가 생성되었을 때 호출되는 이벤트입니다. 이 이벤트를 활용하면 컴포넌트가 생성되는 시점에 처리해야 할 작업을 수행할 수 있습니다. 예를 들어, 컴포넌트가 생성될 때 초기 데이터를 설정하거나, 외부 라이브러리를 초기화하는 작업을 할 수 있습니다.

class MyComponent extends HTMLElement {
  connectedCallback() {
    this.dispatchEvent(new Event('created'));
  }
  
  // ...
}

const myComponent = document.createElement('my-component');
myComponent.addEventListener('created', () => {
  console.log('The component has been created');
});

disconnected 이벤트

웹 컴포넌트가 DOM에서 제거되었을 때 호출되는 이벤트입니다. 이 이벤트를 활용하면 컴포넌트가 제거되는 시점에 정리 작업을 수행할 수 있습니다. 예를 들어, 컴포넌트와 관련된 리소스를 해제하거나, 이벤트 리스너를 제거하는 작업을 할 수 있습니다.

class MyComponent extends HTMLElement {
  disconnectedCallback() {
    this.dispatchEvent(new Event('disconnected'));
  }
  
  // ...
}

const myComponent = document.querySelector('my-component');
myComponent.addEventListener('disconnected', () => {
  console.log('The component has been disconnected');
});

2. 컴포넌트의 업데이트

attributeChanged 이벤트

웹 컴포넌트의 속성이 변경되었을 때 호출되는 이벤트입니다. 이 이벤트를 활용하면 속성의 변경에 대응하여 컴포넌트를 업데이트할 수 있습니다. 예를 들어, 속성이 변경될 때 컴포넌트의 화면을 다시 그리거나, 데이터를 업데이트하는 작업을 할 수 있습니다.

class MyComponent extends HTMLElement {
  static get observedAttributes() {
    return ['my-attribute'];
  }
  
  attributeChangedCallback(attributeName, oldValue, newValue) {
    if (attributeName === 'my-attribute') {
      console.log(`The attribute '${attributeName}' has changed from '${oldValue}' to '${newValue}'`);
    }
  }
  
  // ...
}

3. 컴포넌트의 스타일 변경

adopted 이벤트

웹 컴포넌트가 다른 문서로 이동되었을 때 호출되는 이벤트입니다. 이 이벤트를 활용하면 컴포넌트가 새로운 문서에 추가되었을 때 스타일 변경 등의 작업을 할 수 있습니다.

class MyComponent extends HTMLElement {
  adoptedCallback() {
    console.log('The component has been moved to a new document');
  }
  
  // ...
}

웹 컴포넌트의 라이프사이클 이벤트를 활용하여 컴포넌트의 동작을 제어하고 작업을 수행할 수 있습니다. 이를 통해 재사용 가능한 컴포넌트를 보다 유연하게 구현할 수 있습니다. 자세한 내용은 공식 문서를 참조해주세요.

참고 자료

MDN Web Components