Angular 컴포넌트 통신: Input(), Output()
출처: Dev.to
Angular 컴포넌트는 부모‑자식, 형제, 무관 관계에 따라 특정 패턴으로 통신합니다. 가장 흔히 쓰이는 방법은 @Input() 과 @Output() 데코레이터이며, 최근에는 Signals 와 Model Inputs 같은 최신 기능도 대안으로 등장했습니다.
데코레이터를 이용한 클래식 방식
Angular v17 이전에는 @Input() 과 @Output() 데코레이터를 사용해 부모‑자식 간에 데이터를 주고받았습니다. 부모가 자식에게 데이터를 전달하려면 [product]="productData" 와 같이 대괄호를 사용하고, 자식이 부모에게 이벤트를 전달하려면 (addToCart)="addProductToCart($event)" 와 같이 괄호를 사용해 바인딩합니다.
자식 컴포넌트
// 전통적인 `Input` 과 `Output`을 사용하는 컴포넌트.
...
@Component({
selector: 'app-product-card'
template: `
...
Add To Cart
`
})
class ProductCardComponent{
// 부모로부터 데이터를 받음.
@Input() productData!: Product;
// 부모에게 데이터를 보냄.
@Output() addToCart= new EventEmitter();
onAddToCart(event: MouseEvent): void {
// 클릭 이벤트가 부모 컴포넌트까지 전파되는 것을 방지하고, 제품만 emit
event.stopPropagation();
// 제품을 부모 컴포넌트에 emit
this.addToCart.emit(this.product);
}
}
...부모 컴포넌트
...
@Component({
selector: 'app-product-page'
template: `
`
})
class ProductPageComponent{
...
// 자식으로부터 이벤트를 받아 장바구니에 추가
addToCart(product: Product){
this.cartService.addToCart(product);
}
}input() 과 output() 을 이용한 최신 방식
Angular v17.3에 도입되고 v19에서 안정화·프로덕션 레디가 된 input() 시그널 함수와 output() 함수(시그널이 아님)가 새롭게 추가되었습니다. 이는 성능 향상, 변경 감지 개선, Signals와의 매끄러운 통합을 제공하며, 코드도 훨씬 깔끔해집니다.
아래는 input() 시그널과 output() 함수를 사용한 자식 컴포넌트 예시이며, 부모 컴포넌트는 기존과 동일합니다.
// 최신 `Input` 과 `Output`을 사용하는 컴포넌트.
@Component({...})
class ProductCardComponent{
// input 시그널을 이용해 부모로부터 데이터 수신
product = input();
// output 함수를 이용해 부모에게 데이터 전송
addToCart = output();
onAddToCart(event: MouseEvent): void {
...
// 제품을 부모 컴포넌트에 emit
this.addToCart.emit(this.product);
}
}위 코드 스니펫에서 눈에 띄는 변화
input()함수는 시그널을 선언합니다. 부모 컴포넌트가 입력값을 바꾸면 자동으로 업데이트됩니다.output()표현식은@Output()데코레이터 대신 사용됩니다.EventEmitter가 사라졌습니다.ngOnChanges생명주기 훅을 사용할 필요가 없습니다. 대신 시그널 기반 입력을 다룰 때는computed와effect를 활용하는 것이 권장됩니다.
Signal Input 과 Output Function 으로 마이그레이션
Angular CLI는 클래식 @Input()·@Output() 코드를 새로운 input() 시그널 함수와 output() 함수로 자동 변환해 주는 스키매틱을 제공합니다.
ng generate @angular/core:signal-input-migration
ng generate @angular/core:output-migration위 명령어는 다음을 수행합니다.
@Input()속성을 시그널 기반input()으로 변환합니다.@Output()속성을output()형태로 변환합니다.- 컴포넌트·디렉티브 파일의 import 구문을 TypeScript 모듈 수준에서 업데이트합니다.
event.next()와 같이 권장되지 않는 API 호출을event.emit()로 바꾸고,event.complete()호출을 제거합니다.
결론
Angular 프레임워크가 지속적으로 진화함에 따라, Signal 기반 아키텍처를 도입하는 것이 강력히 권장됩니다. 이는 변경 감지를 개선하고, ZoneJS 기반 Angular 애플리케이션에서 흔히 보였던 “몽키 패치”를 없애줍니다. Angular v21 이후 기본값이 된 Zoneless 모드와 함께, Signal 기반 아키텍처는 이제 이상적인 Angular 애플리케이션과 향상된 개발자 경험을 위한 표준이 되었습니다.