[2024.10.16] Angular EventEmitter

Angular에서는 컴포넌트 간에 데이터를 주고받을 때, 주로 부모-자식 관계를 활용한다.
그중에서 자식 컴포넌트에서 부모 컴포넌트로 이벤트를 전달할 때 사용하는 것이 바로 @Output() 데코레이터와 EventEmitter이다.

1. 자식 컴포넌트에서 EventEmitter 선언

먼저, 자식 컴포넌트에서 @Output() 데코레이터로 이벤트를 선언한다. 이 이벤트는 부모 컴포넌트에 전달되어 특정 작업을 실행하게 만든다. 예를 들어, 자식 컴포넌트에서 버튼을 클릭했을 때 부모에게 그 정보를 전달하고 싶을 때 사용할 수 있다.

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="notifyParent()">Click me!</button>`,
})
export class ChildComponent {
  // 부모에게 전달할 이벤트 선언
  @Output() buttonClicked = new EventEmitter<string>();

  // 부모에게 이벤트 발생 알리기
  notifyParent() {
    this.buttonClicked.emit('Button was clicked!');
  }
}

 

이 코드에서 @Output() 데코레이터를 사용해 buttonClicked라는 이벤트를 정의했는데, buttonClicked.emit()을 호출하면 이 이벤트가 발생하여 부모 컴포넌트로 전달된다.

2. 부모 컴포넌트에서 이벤트 받기

부모 컴포넌트에서는 자식 컴포넌트의 이벤트를 받아 처리할 수 있다. 자식 컴포넌트의 buttonClicked 이벤트를 부모 컴포넌트의 HTML 템플릿에서 바인딩하면, 자식에서 발생한 이벤트를 감지할 수 있다.

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child (buttonClicked)="handleButtonClick($event)"></app-child>
    <p>{{ message }}</p>
  `,
})
export class ParentComponent {
  message = '';

  // 자식 컴포넌트에서 전달된 이벤트를 처리하는 함수
  handleButtonClick(event: string) {
    this.message = event; // 자식 컴포넌트에서 전달된 메시지를 부모 컴포넌트에 표시
  }
}

 

여기서 (buttonClicked)="handleButtonClick($event)"는 자식 컴포넌트에서 발생한 buttonClicked 이벤트를 부모 컴포넌트의 handleButtonClick 함수에 연결한다. 자식 컴포넌트에서 버튼을 클릭하면 handleButtonClick 함수가 호출되며, 자식에서 전달된 메시지를 부모 컴포넌트에서 사용할 수 있게 된다.

3. 작동 원리

정리하자면:

1. 자식 컴포넌트에서 @Output() 데코레이터로 이벤트를 선언하고, EventEmitter를 사용해 이벤트를 발생시킨다.
2. 부모 컴포넌트는 자식 컴포넌트의 이벤트를 템플릿에서 바인딩하고, 그 이벤트를 처리하는 핸들러 함수를 정의한다.
3. 자식에서 이벤트가 발생하면 부모에게 전달되어, 부모가 그 이벤트를 처리하게 된다.

4. 예시 코드 결과

위의 코드를 실행하면, 자식 컴포넌트의 버튼을 클릭할 때마다 부모 컴포넌트의 템플릿에 메시지가 표시된다.

결과적으로 자식 컴포넌트에서 발생한 이벤트는 부모 컴포넌트로 전달되어, 부모가 그 이벤트를 처리할 수 있다. 이 방식으로 컴포넌트 간에 효율적으로 데이터를 주고받을 수 있다.

Chat gpt가 알려주는 쉬운 비유

자식 컴포넌트를 "방"이라고 생각해보세요. 방에서 벨을 누르면 부모 컴포넌트(부모님)가 그 소리를 듣고 달려와서 어떤 일이 일어났는지 확인합니다. 이때 벨이 바로 EventEmitter이고, 벨 소리를 듣고 반응하는 것이 부모 컴포넌트에서 이벤트를 처리하는 함수입니다.

결론

EventEmitter를 사용한 이벤트 전달은 Angular에서 컴포넌트 간 상호작용을 쉽게 할 수 있는 기능이다. 자식 컴포넌트에서 이벤트를 발생시키고, 부모 컴포넌트가 이를 처리하는 구조를 통해 다양한 이벤트를 효과적으로 처리할 수 있다.