시그널 쿼리로 자식 엘리먼트 조회하기

디렉티브에서 시그널을 사용하는 방법을 배웠으니, 이제 시그널 기반 쿼리 API를 살펴봅시다. 자식 컴포넌트와 디렉티브에 반응형으로 접근하고 상호작용할 수 있습니다. 컴포넌트와 디렉티브는 모두 쿼리를 수행하면서 쿼리 대상이 될 수도 있습니다. 기존 ViewChild와 달리 시그널 쿼리는 결과를 시그널로 제공하며, 자동 갱신과 타입 안전성을 활용해서 자식 컴포넌트와 디렉티브에 접근할 수 있습니다.

이번 실습에서는 viewChild 쿼리를 추가해서 코드로 자식 컴포넌트와 상호작용합니다.

1. viewChild 불러오기

   먼저 app.ts에서 자식 컴포넌트에 접근할 수 있도록 viewChild를 불러옵니다.

   import {Component, signal, computed, viewChild, ChangeDetectionStrategy} from '@angular/core';

2. viewChild 쿼리 생성하기

   App 컴포넌트에 자식 컴포넌트를 조회하는 viewChild 쿼리를 추가합니다.

   // Query APIs to access child components
   firstProduct = viewChild(ProductCard);
   cartSummary = viewChild(CartSummary);

   이 쿼리는 자식 컴포넌트 인스턴스를 참조하는 시그널을 만듭니다.

3. 부모 메서드 구현하기

   app.ts에서 viewChild 쿼리를 사용해서 자식 컴포넌트의 메서드를 호출합니다:

   showFirstProductDetails() {
     const product = this.firstProduct();
     if (product) {
       product.highlight();
     }
   }
   
   initiateCheckout() {
     const summary = this.cartSummary();
     if (summary) {
       summary.initiateCheckout();
     }
   }

4. 상호작용 테스트하기

   이제 제어 버튼이 동작해야 합니다:

   • "Show First Product Details" - ProductCard의 highlight()를 호출합니다.
   • "Initiate Checkout" - CartSummary의 initiateCheckout()을 호출합니다.

   버튼을 클릭해서 viewChild 쿼리로 부모 컴포넌트가 자식의 동작을 제어하는 것을 확인하세요.

시그널 기반 쿼리 API로 자식 컴포넌트와 상호작용하는 방법을 배웠습니다!

다음 단계에서는 effect로 시그널 변경에 반응하는 방법을 배웁니다!