[javascript] Aurelia와 이벤트 핸들링 및 메시지 전달 기능

21 Dec 2023

javascript

Aurelia는 뷰와 비즈니스 로직을 쉽게 분리하고 컴포넌트 간의 통신을 효율적으로 관리하는 동적 JavaScript 프레임워크입니다. 이번 포스트에서는 Aurelia에서의 이벤트 핸들링과 메시지 전달 기능에 대해 알아보겠습니다.

이벤트 핸들링

Aurelia에서의 이벤트 핸들링은 템플릿과 뷰 모델 간의 상호작용을 용이하게 만들어줍니다. HTML 템플릿에서 사용자의 동작을 감지하고 뷰 모델에 전달하기 위해 이벤트를 핸들링할 수 있습니다.

// app.html
<button click.delegate="handleClick()">Click me</button>

// app.js
export class App {
  handleClick() {
    // click 이벤트 핸들링 로직
  }
}

위의 예제에서 click.delegate를 사용하여 클릭 이벤트를 핸들링할 수 있습니다. 그리고 해당 이벤트를 처리할 뷰 모델의 함수를 호출합니다.

메시지 전달

뷰 모델 간에 데이터를 전달하거나 상태를 공유하기 위해 Aurelia에서는 이벤트를 통해 메시지를 전달하는 기능을 제공합니다.

// app.js
import { EventAggregator } from 'aurelia-event-aggregator';
import { inject } from 'aurelia-framework';

@inject(EventAggregator)
export class Sender {
  constructor(eventAggregator) {
    this.eventAggregator = eventAggregator;
  }

  sendMessage() {
    this.eventAggregator.publish('message', { data: 'Hello from Sender' });
  }
}

@inject(EventAggregator)
export class Receiver {
  constructor(eventAggregator) {
    this.eventAggregator = eventAggregator;
    this.subscription = this.eventAggregator.subscribe('message', message => {
      // 메시지 수신 후 로직 처리
    });
  }

  detached() {
    this.subscription.dispose();
  }
}

위의 예제에서 EventAggregator를 이용하여 메시지를 발행하고 구독하는 방식으로, 메시지를 전달하고 수신할 수 있습니다.

Aurelia의 이벤트 핸들링과 메시지 전달 기능을 통해 컴포넌트 간의 상호작용을 쉽게 구현할 수 있습니다.

더 많은 정보는 Aurelia 공식 문서에서 확인할 수 있습니다.