이벤트 처리

이벤트 처리 기능을 활용하면 웹 앱과 사용자가 상호작용할 수 있습니다. 이벤트 처리는 버튼을 누르거나 폼을 제출하는 등의 작업을 의미합니다.

참고: 사용자 입력 처리하기 핵심 가이드 문서를 참고하세요.

이번에는 이벤트 핸들러를 어떻게 추가할 수 있는지 알아봅시다.

이벤트를 소괄호((, ))로 감싸면 이벤트를 바인딩할 수 있습니다. 그리고 소괄호 오른쪽에 이벤트를 처리할 핸들러를 지정하면 됩니다. button 예제를 봅시다:

@Component({
    ...
    template: `<button (click)="greet()">`
})
export class App {
    greet() {
        console.log('Hello, there 👋');
    }
}

위 예제처럼 구현하면 버튼을 클릭할 때마다 greet() 함수가 실행됩니다. greet() 함수를 실행하기 위해 소괄호를 붙이는 것을 잊지 마세요.

자, 이제 직접 수정해 봅시다:

  1. 이벤트 핸들러를 추가해 보세요

    App 클래스에 이미 있는 showSecretMessage() 메서드의 본문을 다음 코드로 채우세요.

    this.message = 'Way to go 🚀';

  2. 템플릿에서 이벤트를 바인딩합니다

    app.ts 파일에 있는 템플릿에서 section 엘리먼트의 시작 태그에 mouseover 이벤트를 바인딩해 보세요. 내부 안내 문구와 {{ message }} 문자열 바인딩은 그대로 유지하세요.

    <section (mouseover)="showSecretMessage()">

간단한 작업만으로 이벤트 핸들러를 구현해 봤습니다. 꽤 잘하시는 것 같네요. 계속 해봅시다.