[Angular 마스터하기] Day 7 - 컴포넌트 간 통신, 부모↔자식 데이터 주고받기

이제와서 시작하는 Angular 마스터하기 - Day 7 “컴포넌트들이 서로 대화하는 방법을 배워봅시다! 부모 ↔ 자식, 완벽 소통! 💬”

오늘 배울 내용

• @Input() - 부모에서 자식으로 데이터 전달
• @Output() - 자식에서 부모로 이벤트 전달
• Signal Input (최신 방식!)
• 실습: 재사용 가능한 컴포넌트 만들기

---

1. 왜 컴포넌트 간 통신이 필요할까?

컴포넌트 계층 구조

실제 앱은 여러 컴포넌트가 중첩되어 있어요:

graph TD
    A[AppComponent<br/>부모] --> B[HeaderComponent<br/>자식]
    A --> C[ProductListComponent<br/>자식]
    A --> D[FooterComponent<br/>자식]
    C --> E[ProductCardComponent<br/>손자]
    C --> F[ProductCardComponent<br/>손자]
    C --> G[ProductCardComponent<br/>손자]

    style A fill:#dd0031,color:#fff
    style C fill:#667eea,color:#fff
    style E fill:#4CAF50,color:#fff
    style F fill:#4CAF50,color:#fff
    style G fill:#4CAF50,color:#fff

필요한 소통:

• 부모 → 자식: “이 데이터로 화면 그려줘”
• 자식 → 부모: “버튼 클릭했어요!”

---

2. @Input - 부모 → 자식

기본 사용법

// 자식 컴포넌트
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-user-card',
  standalone: true,
  template: `
    <div class="card">
      <h3>{{ name }}</h3>
      <p>{{ age }}세</p>
    </div>
  `
})
export class UserCardComponent {
  @Input() name = '';      // 부모로부터 받을 데이터
  @Input() age = 0;
}

// 부모 컴포넌트
@Component({
  selector: 'app-parent',
  standalone: true,
  imports: [UserCardComponent],
  template: `
    <div>
      <!-- 부모 → 자식으로 데이터 전달 -->
      <app-user-card [name]="'홍길동'" [age]="25"></app-user-card>
      <app-user-card [name]="'김철수'" [age]="30"></app-user-card>
    </div>
  `
})
export class ParentComponent {}

동적 데이터 전달

@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [UserCardComponent],
  template: `
    <div class="user-list">
      <h2>사용자 목록</h2>

      @for (user of users; track user.id) {
        <app-user-card
          [name]="user.name"
          [age]="user.age">
        </app-user-card>
      }
    </div>
  `
})
export class UserListComponent {
  users = [
    { id: 1, name: '홍길동', age: 25 },
    { id: 2, name: '김철수', age: 30 },
    { id: 3, name: '이영희', age: 28 }
  ];
}

객체 전달하기

// 인터페이스 정의
interface Product {
  id: number;
  name: string;
  price: number;
  image: string;
}

// 자식 컴포넌트
@Component({
  selector: 'app-product-card',
  standalone: true,
  template: `
    <div class="product-card">
      <img [src]="product.image" [alt]="product.name">
      <h3>{{ product.name }}</h3>
      <p class="price">{{ product.price | number }}원</p>
      <button>장바구니 담기</button>
    </div>
  `,
  styles: [`
    .product-card {
      border: 2px solid #eee;
      border-radius: 10px;
      padding: 20px;
      text-align: center;
    }
    img {
      width: 100%;
      max-width: 200px;
      border-radius: 8px;
    }
    .price {
      color: #667eea;
      font-size: 1.5em;
      font-weight: bold;
    }
  `]
})
export class ProductCardComponent {
  @Input() product!: Product;  // ! = 반드시 전달됨을 보장
}

// 부모 컴포넌트
@Component({
  selector: 'app-product-list',
  standalone: true,
  imports: [ProductCardComponent, CommonModule],
  template: `
    <div class="product-grid">
      @for (product of products; track product.id) {
        <app-product-card [product]="product"></app-product-card>
      }
    </div>
  `,
  styles: [`
    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
      padding: 20px;
    }
  `]
})
export class ProductListComponent {
  products: Product[] = [
    { id: 1, name: '노트북', price: 1500000, image: 'https://picsum.photos/200' },
    { id: 2, name: '마우스', price: 50000, image: 'https://picsum.photos/201' },
    { id: 3, name: '키보드', price: 80000, image: 'https://picsum.photos/202' }
  ];
}

---

3. @Output - 자식 → 부모

EventEmitter 사용하기

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

// 자식 컴포넌트
@Component({
  selector: 'app-counter-control',
  standalone: true,
  template: `
    <div class="control">
      <button (click)="onIncrement()">+1</button>
      <button (click)="onDecrement()">-1</button>
      <button (click)="onReset()">리셋</button>
    </div>
  `
})
export class CounterControlComponent {
  @Output() increment = new EventEmitter<void>();
  @Output() decrement = new EventEmitter<void>();
  @Output() reset = new EventEmitter<void>();

  onIncrement() {
    this.increment.emit();  // 부모에게 이벤트 전달!
  }

  onDecrement() {
    this.decrement.emit();
  }

  onReset() {
    this.reset.emit();
  }
}

// 부모 컴포넌트
@Component({
  selector: 'app-counter-parent',
  standalone: true,
  imports: [CounterControlComponent],
  template: `
    <div class="counter-app">
      <h2>카운터: {{ count }}</h2>

      <!-- 자식의 이벤트를 받아서 처리 -->
      <app-counter-control
        (increment)="handleIncrement()"
        (decrement)="handleDecrement()"
        (reset)="handleReset()">
      </app-counter-control>
    </div>
  `
})
export class CounterParentComponent {
  count = 0;

  handleIncrement() {
    this.count++;
  }

  handleDecrement() {
    this.count--;
  }

  handleReset() {
    this.count = 0;
  }
}

데이터와 함께 이벤트 전달

// 자식 컴포넌트
@Component({
  selector: 'app-search-box',
  standalone: true,
  imports: [FormsModule],
  template: `
    <div class="search-box">
      <input
        type="text"
        [(ngModel)]="searchTerm"
        (keyup.enter)="onSearch()"
        placeholder="검색어를 입력하세요">
      <button (click)="onSearch()">🔍 검색</button>
    </div>
  `,
  styles: [`
    .search-box {
      display: flex;
      gap: 10px;
    }
    input {
      flex: 1;
      padding: 12px;
      font-size: 1em;
      border: 2px solid #ddd;
      border-radius: 8px;
    }
    button {
      padding: 12px 24px;
      background: #667eea;
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }
  `]
})
export class SearchBoxComponent {
  searchTerm = '';

  @Output() search = new EventEmitter<string>();

  onSearch() {
    this.search.emit(this.searchTerm);  // 검색어를 부모에게 전달
  }
}

// 부모 컴포넌트
@Component({
  selector: 'app-search-parent',
  standalone: true,
  imports: [SearchBoxComponent],
  template: `
    <div class="search-app">
      <app-search-box (search)="handleSearch($event)"></app-search-box>

      @if (lastSearchTerm) {
        <p class="result">
          "{{ lastSearchTerm }}" 검색 결과
        </p>
      }
    </div>
  `
})
export class SearchParentComponent {
  lastSearchTerm = '';

  handleSearch(term: string) {
    this.lastSearchTerm = term;
    console.log('검색:', term);
    // 실제로는 여기서 API 호출 등을 함
  }
}

---

4. Signal Input (⭐ 최신 방식!)

Angular 17.1+부터는 Signal 기반의 Input을 사용할 수 있어요!

input() 함수 사용

import { Component, input, output } from '@angular/core';

// 자식 컴포넌트 - Signal Input 사용
@Component({
  selector: 'app-user-badge',
  standalone: true,
  template: `
    <div class="badge" [class]="type()">
      <span class="icon">{{ getIcon() }}</span>
      <span class="label">{{ label() }}</span>
      <button (click)="onRemove()">✕</button>
    </div>
  `,
  styles: [`
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 0.9em;
    }
    .badge.success {
      background: #e8f5e9;
      color: #4CAF50;
    }
    .badge.warning {
      background: #fff3e0;
      color: #ff9800;
    }
    .badge.error {
      background: #ffebee;
      color: #f44336;
    }
    button {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 1.1em;
      opacity: 0.7;
    }
    button:hover {
      opacity: 1;
    }
  `]
})
export class UserBadgeComponent {
  // Signal Input - 자동으로 Signal이 됨!
  label = input.required<string>();  // 필수 입력
  type = input<'success' | 'warning' | 'error'>('success');  // 선택 입력 (기본값)

  // Signal Output
  remove = output<void>();

  getIcon() {
    const icons = {
      success: '✅',
      warning: '⚠️',
      error: '❌'
    };
    return icons[this.type()];
  }

  onRemove() {
    this.remove.emit();
  }
}

// 부모 컴포넌트
@Component({
  selector: 'app-badge-parent',
  standalone: true,
  imports: [UserBadgeComponent],
  template: `
    <div class="badge-demo">
      <h2>뱃지 데모</h2>

      <div class="badges">
        @for (badge of badges(); track badge.id) {
          <app-user-badge
            [label]="badge.label"
            [type]="badge.type"
            (remove)="removeBadge(badge.id)">
          </app-user-badge>
        }
      </div>

      <button (click)="addBadge()">뱃지 추가</button>
    </div>
  `
})
export class BadgeParentComponent {
  badges = signal([
    { id: 1, label: '관리자', type: 'success' as const },
    { id: 2, label: '경고', type: 'warning' as const },
    { id: 3, label: '오류', type: 'error' as const }
  ]);

  removeBadge(id: number) {
    this.badges.update(badges => badges.filter(b => b.id !== id));
  }

  addBadge() {
    const types = ['success', 'warning', 'error'] as const;
    const type = types[Math.floor(Math.random() * types.length)];

    this.badges.update(badges => [
      ...badges,
      {
        id: Date.now(),
        label: `뱃지 ${badges.length + 1}`,
        type
      }
    ]);
  }
}

---

5. 실전 예제: 평점 컴포넌트

완전히 재사용 가능한 평점 컴포넌트를 만들어봅시다!

star-rating.component.ts

import { Component, input, output, computed } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-star-rating',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './star-rating.component.html',
  styleUrl: './star-rating.component.css'
})
export class StarRatingComponent {
  // Input
  rating = input<number>(0);           // 현재 평점 (0-5)
  maxStars = input<number>(5);         // 최대 별 개수
  readonly = input<boolean>(false);    // 읽기 전용 모드
  size = input<'small' | 'medium' | 'large'>('medium');

  // Output
  ratingChange = output<number>();

  // Computed
  stars = computed(() => {
    return Array.from({ length: this.maxStars() }, (_, i) => i + 1);
  });

  hoverRating = 0;

  onStarClick(star: number) {
    if (!this.readonly()) {
      this.ratingChange.emit(star);
    }
  }

  onStarHover(star: number) {
    if (!this.readonly()) {
      this.hoverRating = star;
    }
  }

  onMouseLeave() {
    this.hoverRating = 0;
  }

  getStarClass(star: number): string {
    const currentRating = this.hoverRating || this.rating();

    if (star <= Math.floor(currentRating)) {
      return 'filled';
    } else if (star === Math.ceil(currentRating) && currentRating % 1 !== 0) {
      return 'half';
    }
    return 'empty';
  }
}

star-rating.component.html

<div
  class="star-rating"
  [class]="size()"
  [class.readonly]="readonly()"
  (mouseleave)="onMouseLeave()">

  @for (star of stars(); track star) {
    <span
      class="star"
      [class]="getStarClass(star)"
      (click)="onStarClick(star)"
      (mouseenter)="onStarHover(star)">
      ★
    </span>
  }

  <span class="rating-text">
    {{ rating().toFixed(1) }} / {{ maxStars() }}
  </span>
</div>

star-rating.component.css

.star-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.star {
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.star.filled {
  color: #ffd700;
}

.star.half {
  background: linear-gradient(90deg, #ffd700 50%, #ddd 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.star.empty {
  color: #ddd;
}

.star:hover {
  transform: scale(1.2);
}

.star-rating.readonly .star {
  cursor: default;
}

.star-rating.readonly .star:hover {
  transform: none;
}

/* 크기 */
.star-rating.small {
  font-size: 1em;
}

.star-rating.medium {
  font-size: 1.5em;
}

.star-rating.large {
  font-size: 2em;
}

.rating-text {
  margin-left: 8px;
  font-size: 0.6em;
  color: #666;
}

사용 예시

@Component({
  selector: 'app-product-review',
  standalone: true,
  imports: [StarRatingComponent],
  template: `
    <div class="review-card">
      <h3>{{ product.name }}</h3>

      <div class="rating-section">
        <p>평점을 주세요:</p>
        <app-star-rating
          [rating]="product.rating"
          [size]="'large'"
          (ratingChange)="onRatingChange($event)">
        </app-star-rating>
      </div>

      <div class="readonly-section">
        <p>평균 평점 (읽기 전용):</p>
        <app-star-rating
          [rating]="4.5"
          [readonly]="true"
          [size]="'medium'">
        </app-star-rating>
      </div>
    </div>
  `
})
export class ProductReviewComponent {
  product = {
    name: '무선 이어폰',
    rating: 3
  };

  onRatingChange(newRating: number) {
    this.product.rating = newRating;
    console.log('새로운 평점:', newRating);
  }
}

---

6. 실전 예제: 모달 컴포넌트

import { Component, input, output } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-modal',
  standalone: true,
  imports: [CommonModule],
  template: `
    @if (isOpen()) {
      <div class="modal-overlay" (click)="onOverlayClick()">
        <div class="modal-content" (click)="$event.stopPropagation()">
          <!-- 헤더 -->
          <div class="modal-header">
            <h2>{{ title() }}</h2>
            <button class="close-btn" (click)="onClose()">✕</button>
          </div>

          <!-- 본문 -->
          <div class="modal-body">
            <ng-content></ng-content>
          </div>

          <!-- 푸터 -->
          @if (showFooter()) {
            <div class="modal-footer">
              <button class="btn btn-secondary" (click)="onClose()">
                취소
              </button>
              <button class="btn btn-primary" (click)="onConfirm()">
                확인
              </button>
            </div>
          }
        </div>
      </div>
    }
  `,
  styles: [`
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }

    .modal-content {
      background: white;
      border-radius: 15px;
      max-width: 500px;
      width: 90%;
      max-height: 80vh;
      overflow: auto;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      border-bottom: 2px solid #eee;
    }

    .modal-header h2 {
      margin: 0;
      color: #333;
    }

    .close-btn {
      background: none;
      border: none;
      font-size: 1.5em;
      cursor: pointer;
      color: #999;
    }

    .close-btn:hover {
      color: #333;
    }

    .modal-body {
      padding: 20px;
    }

    .modal-footer {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      padding: 20px;
      border-top: 2px solid #eee;
    }

    .btn {
      padding: 10px 20px;
      border: none;
      border-radius: 8px;
      font-weight: bold;
      cursor: pointer;
    }

    .btn-primary {
      background: #667eea;
      color: white;
    }

    .btn-secondary {
      background: #e0e0e0;
      color: #333;
    }
  `]
})
export class ModalComponent {
  // Input
  isOpen = input<boolean>(false);
  title = input<string>('제목');
  showFooter = input<boolean>(true);

  // Output
  close = output<void>();
  confirm = output<void>();

  onClose() {
    this.close.emit();
  }

  onConfirm() {
    this.confirm.emit();
  }

  onOverlayClick() {
    this.onClose();
  }
}

// 사용 예시
@Component({
  selector: 'app-modal-demo',
  standalone: true,
  imports: [ModalComponent],
  template: `
    <div class="demo">
      <button (click)="openModal()">모달 열기</button>

      <app-modal
        [isOpen]="isModalOpen"
        [title]="'사용자 정보'"
        (close)="closeModal()"
        (confirm)="handleConfirm()">

        <p>모달 안의 내용입니다.</p>
        <p>여기에 원하는 컨텐츠를 넣을 수 있어요!</p>
      </app-modal>
    </div>
  `
})
export class ModalDemoComponent {
  isModalOpen = false;

  openModal() {
    this.isModalOpen = true;
  }

  closeModal() {
    this.isModalOpen = false;
  }

  handleConfirm() {
    console.log('확인 버튼 클릭!');
    this.closeModal();
  }
}

---

🧪 직접 해보기

실습 1: 좋아요 버튼 컴포넌트

미션: 재사용 가능한 좋아요 버튼을 만드세요!

@Component({
  selector: 'app-like-button',
  standalone: true,
  template: `
    <button
      (click)="onToggle()"
      [class.liked]="isLiked()">
      {{ isLiked() ? '❤️' : '🤍' }}
      {{ count() }}
    </button>
  `
})
export class LikeButtonComponent {
  isLiked = input<boolean>(false);
  count = input<number>(0);

  toggle = output<boolean>();

  onToggle() {
    this.toggle.emit(!this.isLiked());
  }
}

실습 2: 페이지네이션 컴포넌트

미션: 페이지 번호를 관리하는 컴포넌트를 만드세요!

@Component({
  selector: 'app-pagination',
  template: `
    <div class="pagination">
      <button (click)="onPrev()" [disabled]="currentPage() === 1">
        이전
      </button>

      @for (page of pages(); track page) {
        <button
          (click)="onPageClick(page)"
          [class.active]="page === currentPage()">
          {{ page }}
        </button>
      }

      <button (click)="onNext()" [disabled]="currentPage() === totalPages()">
        다음
      </button>
    </div>
  `
})
export class PaginationComponent {
  currentPage = input<number>(1);
  totalPages = input<number>(10);

  pageChange = output<number>();

  pages = computed(() => {
    return Array.from({ length: this.totalPages() }, (_, i) => i + 1);
  });

  onPageClick(page: number) {
    this.pageChange.emit(page);
  }

  onPrev() {
    if (this.currentPage() > 1) {
      this.pageChange.emit(this.currentPage() - 1);
    }
  }

  onNext() {
    if (this.currentPage() < this.totalPages()) {
      this.pageChange.emit(this.currentPage() + 1);
    }
  }
}

---

💡 자주 하는 실수

❌ 실수 1: Input에 [] 빼먹기

<!-- ❌ 틀린 예 - 문자열 "userName"이 전달됨 -->
<app-user name="userName">

<!-- ✅ 올바른 예 - 변수 userName의 값이 전달됨 -->
<app-user [name]="userName">

❌ 실수 2: Output에 () 빼먹기

<!-- ❌ 틀린 예 -->
<app-button click="handleClick()">

<!-- ✅ 올바른 예 -->
<app-button (click)="handleClick()">

❌ 실수 3: EventEmitter의 emit() 호출 안 함

// ❌ 틀린 예
@Output() save = new EventEmitter();
onSave() {
  this.save;  // 아무 일도 안 일어남!
}

// ✅ 올바른 예
onSave() {
  this.save.emit();  // 이벤트 발생!
}

---

📝 정리

통신 방향

방향	방법	예시
부모 → 자식	@Input() / input()	[name]="value"
자식 → 부모	@Output() / output()	(click)="handler()"

데코레이터 vs Signal

항목	데코레이터 방식	Signal 방식
Input	@Input()	input()
Output	@Output()	output()
변경 감지	Zone.js	Signal
성능	보통	더 빠름 ✨
타입 안정성	좋음	더 좋음 ✅

핵심 개념

graph TB
    A[부모 컴포넌트] -->|"[input]='value'"| B[자식 컴포넌트]
    B -->|"(output)='handler()'"| A

    style A fill:#dd0031,color:#fff
    style B fill:#667eea,color:#fff

체크리스트

• @Input()으로 데이터를 받을 수 있나요?
• @Output()으로 이벤트를 보낼 수 있나요?
• Signal Input/Output을 사용할 수 있나요?
• 재사용 가능한 컴포넌트를 만들어봤나요?

---

📚 다음 학습

다음 시간에는 서비스와 의존성 주입을 배웁니다!

컴포넌트 간 통신을 배웠으니, 이제 더 효율적인 데이터 공유 방법을 배웁니다:

• 서비스가 무엇인지
• inject() 함수로 서비스 주입
• 싱글톤 패턴

• 실습: 데이터 관리 서비스

• 이전: Day 6: Signal 상태 관리
• 다음: Day 8: 서비스와 의존성 주입 - 코드 재사용의 기술
• 전체 커리큘럼: Angular 마스터하기 시리즈

---

💬 마무리하며

“컴포넌트는 혼자가 아닙니다! 서로 소통하며 협력하는 컴포넌트가 좋은 앱을 만듭니다! 🤝”

오늘은 컴포넌트 간 통신을 배웠습니다. 이제 재사용 가능한 컴포넌트를 만들 수 있어요!

내일은 서비스로 더 효율적인 코드를 작성하는 방법을 배웁니다! 🚀

궁금한 점이 있으면 댓글로 질문해주세요! 💬

---

“좋은 소통이 좋은 코드를 만듭니다!” ✨