웹 컴포넌트는 웹 개발에서 재사용 가능한 UI 요소를 만들기 위한 표준 방법입니다. 이벤트 처리는 웹 컴포넌트에서 상호 작용하는 데 중요한 부분이며, 이 문서에서는 웹 컴포넌트에서 이벤트를 처리하는 방법에 대해 알아보겠습니다.
이벤트 핸들링
1. addEventListener 사용하기
addEventListener 메서드를 사용하여 웹 컴포넌트 내부에서 이벤트를 처리할 수 있습니다. 이 메서드를 사용하면 원하는 이벤트에 대한 콜백 함수를 등록할 수 있습니다. 다음은 간단한 예제입니다.
class MyComponent extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.addEventListener('click', this.handleClick);
}
handleClick(event) {
// 이벤트 처리 로직 작성
}
}
위의 예제에서는 connectedCallback 메서드 내부에서 click 이벤트에 대한 handleClick 콜백 함수를 등록합니다. 이제 웹 컴포넌트가 클릭 이벤트를 받으면 handleClick 함수가 실행됩니다. 이 콜백 함수에서는 클릭 이벤트를 처리하는 로직을 작성하면 됩니다.
2. custom 이벤트 사용하기
때로는 웹 컴포넌트 내에서 발생한 이벤트를 다른 컴포넌트에서 사용해야 할 때가 있습니다. 이 경우 custom 이벤트를 사용하여 해결할 수 있습니다. 다음은 custom 이벤트를 사용하는 예제입니다.
class MyComponent extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
const event = new CustomEvent('myEvent', {
detail: { data: 'Hello, World!' },
});
this.dispatchEvent(event);
}
}
// 사용 예제
const myComponent = document.querySelector('my-component');
myComponent.addEventListener('myEvent', (event) => {
console.log(event.detail.data); // 'Hello, World!'
});
위의 예제에서는 connectedCallback 메서드 내부에서 myEvent 이름의 custom 이벤트를 생성하고 dispatchEvent 메서드를 사용하여 이벤트를 발생시킵니다. 그리고 이벤트를 처리하기 위해 addEventListener 메서드를 사용하여 이벤트를 수신하는 로직을 작성합니다.
결론
웹 컴포넌트에서 이벤트 처리는 addEventListener 메서드를 사용하여 콜백 함수를 등록하거나 custom 이벤트를 사용하여 다른 컴포넌트와의 상호 작용을 가능하게 할 수 있습니다. 이러한 방법을 통해 웹 컴포넌트를 효율적으로 개발하고 활용할 수 있습니다.