Angular 애플리케이션을 개발하다보면 여러 컴포넌트 간에 데이터를 주고받아야 하는 상황이 발생합니다. 이런 상황에서 Angular에서 제공하는 여러 가지 방법을 사용해 컴포넌트 간 통신을 구현할 수 있습니다. 이 글에서는 Angular 애플리케이션 내에서 컴포넌트 간 효율적으로 데이터를 주고 받는 방법에 대해 알아보겠습니다.

1. Input 프로퍼티를 통한 부모-자식 컴포넌트 통신
   • 한 컴포넌트에서 다른 컴포넌트로 데이터를 전달하려면 @Input 장식자를 사용하여 자식 컴포넌트 클래스의 프로퍼티를 정의하고, 부모 컴포넌트에서는 해당 프로퍼티에 값을 바인딩합니다.

       
    // 자식 컴포넌트
    import { Component, Input } from '@angular/core';
   
    @Component({
      selector: 'app-child',
      template: '<p>{{childMessage}}</p>'
    })
    export class ChildComponent {
      @Input() childMessage: string;
    }
   
    // 부모 컴포넌트 템플릿
    <app-child [childMessage]="parentMessage"></app-child>
       
   

2. Output 프로퍼티 및 EventEmitter를 통한 자식-부모 컴포넌트 통신
   • 자식 컴포넌트에서 이벤트를 발생시켜 부모 컴포넌트로 데이터를 전달할 수 있습니다. EventEmitter를 사용하여 커스텀 이벤트를 정의하고, @Output 장식자를 사용하여 상위 컴포넌트로 해당 이벤트를 발생시킵니다.

    // 자식 컴포넌트
    import { Component, Output, EventEmitter } from '@angular/core';
   
    @Component({
      selector: 'app-child',
      template: '<button (click)="sendMessage()">Send Message</button>'
    })
    export class ChildComponent {
      @Output() messageEvent = new EventEmitter<string>();
   
      sendMessage() {
        this.messageEvent.emit('Message from child component');
      }
    }
   
    // 부모 컴포넌트 템플릿
    <app-child (messageEvent)="receiveMessage($event)"></app-child>
   

3. 서비스를 활용한 비관련 컴포넌트 간 통신
   • 서비스를 활용하여 서로 다른 컴포넌트 간에 데이터를 주고 받을 수 있습니다. 이를 통해 코드를 재사용하고 컴포넌트 간의 결합도를 줄일 수 있습니다.

Angular 애플리케이션에서 컴포넌트 간에 효과적으로 데이터를 전달하는 다양한 방법이 있습니다. 개발하고 있는 애플리케이션의 특성에 맞게 적합한 통신 방법을 선택하여 사용하면 됩니다.