이벤트 바인딩 이해하기 - 버튼 클릭과 같은 상호작용 처리 & 실습: 버튼 클릭 시 메시지 변경하기 (Angular 16 기준)

서론

Angular 16에서 이벤트 바인딩(Event Binding)은 사용자의 상호작용을 컴포넌트의 메서드와 연결하여 다양한 기능을 구현할 수 있게 해주는 중요한 기능입니다. 예를 들어, 버튼 클릭, 입력 필드 변경, 마우스 이동 등 이벤트가 발생했을 때 특정 동작을 실행하도록 이벤트 바인딩을 설정할 수 있습니다. 이번 글에서는 이벤트 바인딩이 무엇인지와 버튼 클릭 시 메시지를 변경하는 실습을 통해 이벤트 바인딩의 기초를 익혀보겠습니다.

본론

1. 이벤트 바인딩이란?

이벤트 바인딩의 개념

이벤트 바인딩은 HTML 요소에서 발생하는 이벤트(예: 클릭, 키 입력, 마우스 이동)를 컴포넌트 클래스의 메서드와 연결하여, 이벤트 발생 시 메서드가 호출되도록 하는 방식입니다. Angular에서는 이벤트 바인딩을 통해 사용자와 애플리케이션 간의 상호작용을 쉽게 처리할 수 있습니다.

Angular의 이벤트 바인딩 문법

이벤트 바인딩은 ( ) 괄호 안에 이벤트명을 넣어 사용하며, 해당 이벤트가 발생할 때 실행할 메서드를 문자열로 입력합니다.

<button (click)="메서드명()">버튼 텍스트</button>

2. 실습: 버튼 클릭 시 메시지 변경하기

이제 Angular에서 버튼 클릭 이벤트를 바인딩하여 버튼을 클릭할 때마다 화면에 표시되는 메시지를 변경하는 예제를 실습해 보겠습니다.

1) 컴포넌트 설정하기

먼저, AppComponent 클래스에 message 속성과 updateMessage() 메서드를 정의합니다. updateMessage() 메서드는 버튼 클릭 시 호출되어 메시지 내용을 업데이트합니다.

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  message: string = "버튼을 클릭해 보세요!";

  updateMessage() {
    this.message = "버튼이 클릭되었습니다!";
  }
}

message: 화면에 표시할 메시지를 저장하는 문자열 변수입니다.
updateMessage(): 버튼 클릭 시 호출되는 메서드로, message의 값을 변경합니다.

2) 이벤트 바인딩을 이용해 버튼 클릭 처리하기

app.component.html 파일에서 버튼을 추가하고 (click) 이벤트 바인딩을 통해 updateMessage() 메서드를 연결합니다. 버튼을 클릭하면 updateMessage() 메서드가 실행되어 message의 내용이 변경됩니다.

<!-- app.component.html -->
<div>
  <p>{{ message }}</p>
  <button (click)="updateMessage()">메시지 변경</button>
</div>

{{ message }}: 컴포넌트의 message 속성에 저장된 내용을 화면에 표시합니다.
(click)="updateMessage()": 버튼이 클릭되었을 때 updateMessage() 메서드를 호출합니다.

3) 결과 확인하기

이제 ng serve 명령어로 Angular 개발 서버를 실행하고 브라우저에서 http://localhost:4200에 접속합니다. 초기 화면에는 "버튼을 클릭해 보세요!"라는 메시지가 표시됩니다. 버튼을 클릭하면 message 속성이 변경되며, 화면에 "버튼이 클릭되었습니다!"라는 새로운 메시지가 표시됩니다.

결론

이 글에서는 Angular의 이벤트 바인딩 개념과 버튼 클릭 시 메시지를 변경하는 예제를 통해 기본적인 이벤트 바인딩 사용법을 학습했습니다. 이벤트 바인딩은 Angular에서 사용자 입력과 상호작용을 처리하는 중요한 기능으로, 다양한 UI 요소와 컴포넌트의 동작을 연결하는 데 유용합니다. Angular의 이벤트 바인딩을 활용해 사용자 인터페이스를 더 상호작용적이고 동적인 방식으로 구성해보세요.

Q&A 섹션

Q1: Angular에서 이벤트 바인딩은 어떤 형식으로 사용하나요?
A1: 이벤트 바인딩은 (event)="method()" 형식으로 사용하며, 예를 들어 (click)="updateMessage()"와 같이 작성합니다.
Q2: 이벤트 바인딩을 사용하면 데이터 바인딩처럼 양방향 데이터 흐름이 생기나요?
A2: 아니요, 이벤트 바인딩은 단방향으로, UI에서 컴포넌트로 이벤트를 전달하는 방식입니다.
Q3: 클릭 외에도 다른 이벤트를 바인딩할 수 있나요?
A3: 네, Angular는 클릭 외에도 keyup, mouseover, change 등 다양한 DOM 이벤트에 대해 바인딩을 지원합니다.

티스토리

5일차: Angular 16 이벤트 바인딩 - 사용자 인터랙션 처리하기