Angular 애플리케이션을 개발하다보면 컴포넌트들 간의 효과적인 통신이 필요할 때가 있습니다. 이 포스트에서는 Angular에서 다양한 방법으로 컴포넌트 간 통신을 하는 방법에 대해 살펴보겠습니다.
1. 부모-자식 컴포넌트 간 통신
부모-자식 관계에 있는 컴포넌트들 간에는 @Input 데코레이터를 사용하여 데이터를 전달할 수 있습니다. 예를 들어, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하려면 다음과 같이 합니다:
// 부모 컴포넌트
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
<app-child [inputData]="parentData"></app-child>
`
})
export class ParentComponent {
parentData: any = '부모로부터 전달된 데이터';
}
// 자식 컴포넌트
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `
<p>{{ inputData }}</p>
`
})
export class ChildComponent {
@Input() inputData: any;
}
2. 자식-부모 컴포넌트 간 통신
자식-부모 관계에 있는 컴포넌트들 간에는 @Output 데코레이터와 EventEmitter를 사용하여 이벤트를 발생시키고 부모 컴포넌트에 데이터를 전달할 수 있습니다. 예를 들어, 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하려면 다음과 같이 합니다:
// 자식 컴포넌트
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
<button (click)="sendDataToParent()">부모에게 데이터 전송</button>
`
})
export class ChildComponent {
@Output() dataEvent = new EventEmitter<any>();
sendDataToParent() {
this.dataEvent.emit('자식으로부터 전달된 데이터');
}
}
// 부모 컴포넌트
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
<app-child (dataEvent)="receiveDataFromChild($event)"></app-child>
`
})
export class ParentComponent {
receiveDataFromChild(data: any) {
console.log(data); // '자식으로부터 전달된 데이터'
}
}
3. 서비스를 활용한 컴포넌트 간 통신
Angular의 서비스를 사용하여 컴포넌트들 간에 데이터를 주고받을 수 있습니다. 서비스를 통해 데이터를 저장하고 공유함으로써 컴포넌트들 간에 유연한 통신이 가능해집니다.
// 통신 서비스
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class CommunicationService {
private dataSubject = new Subject<any>();
data$ = this.dataSubject.asObservable();
sendData(data: any) {
this.dataSubject.next(data);
}
}
위 예제에서 CommunicationService 는 dataSubject를 사용하여 데이터를 등록하고, data$를 통해 구독할 수 있습니다. 컴포넌트에서 CommunicationService를 주입하고 sendData를 호출하여 다른 컴포넌트로 데이터를 전달할 수 있습니다.
이외에도 Angular에서는 BehaviorSubject, ReplaySubject 등의 다양한 RxJS Subject를 사용하여 컴포넌트 간 통신을 할 수 있습니다.
이렇게 Angular에서는 다양한 방법을 사용하여 컴포넌트 간에 효과적인 통신을 할 수 있습니다. 적절한 상황에 맞게 각 방법을 활용하여 개발 효율성을 높이고 유지보수성을 향상시킬 수 있습니다.