@Input과 @Output은 어떻게 컴포넌트 간 통신을 가능하게 하나요?

// 자식: UserCardComponent
import { Component, Input } from "@angular/core";

@Component({ selector: "app-user-card", template: `<h2>{{ user.name }}</h2>` })
export class UserCardComponent {
  @Input() user!: User;        // 부모로부터 데이터를 받는다
  @Input() showEmail = false;  // 기본값과 함께
}

<!-- 부모는 속성 바인딩을 통해 데이터를 전달한다 -->
<app-user-card [user]="currentUser" [showEmail]="true"></app-user-card>

// 자식은 부모가 수신할 수 있는 이벤트를 방출한다
import { Component, Output, EventEmitter } from "@angular/core";

@Component({
  selector: "app-user-card",
  template: `<button (click)="onDelete()">Delete</button>`,
})
export class UserCardComponent {
  @Output() deleted = new EventEmitter<number>(); // 출력 이벤트 선언

  onDelete() {
    this.deleted.emit(this.user.id); // 페이로드와 함께 방출
  }
}

<!-- 부모는 이벤트 바인딩을 통해 수신한다 -->
<app-user-card [user]="u" (deleted)="removeUser($event)"></app-user-card>

부모 ──[user]──────────────→ 자식   (@Input: 데이터 아래로)
부모 ←──(deleted)=removeUser─ 자식   (@Output: 이벤트 위로)

name = input<string>();          // signal 기반 @Input (최신 Angular)
deleted = output<number>();      // signal 기반 @Output