Angular QueryList

QueryList는 Angular에서 제공하는 컬렉션 형태의 데이터 구조입니다. QueryList는 컴포넌트 뷰 내에서 특정 조건을 만족하는 요소들을 선택하고 관리할 수 있는 기능을 제공합니다. QueryList는 @ViewChildren 및 @ContentChildren 데코레이터를 사용하여 생성됩니다.

QueryList의 주요 특징과 동작 방식을 설명하겠습니다:

1. 자동 감지: QueryList는 Angular의 변경 감지 메커니즘에 의해 자동으로 갱신됩니다. 즉, QueryList에 포함된 요소가 동적으로 추가, 제거, 재정렬되면 QueryList는 이를 감지하여 자동으로 업데이트됩니다.

2. 지연된 초기화: QueryList는 초기에 비어있는 상태로 생성되며, 자식 요소가 초기화된 후에 데이터를 수집합니다. 이를 통해 QueryList를 생성하는 컴포넌트의 생명주기 후킹 함수에서 안전하게 사용할 수 있습니다. 예를 들어, ngAfterViewInit에서 QueryList를 사용하면 자식 요소가 모두 초기화된 후에 요소들을 선택할 수 있습니다.

3. 동적 갱신: QueryList는 동적으로 변경되는 상황에서도 업데이트됩니다. 자식 요소들이 추가, 제거, 재정렬되거나 뷰의 변경 사항이 발생하면 QueryList는 이를 감지하여 업데이트됩니다.

4. 반복과 필터링: QueryList는 forEach, filter, map 등과 같은 배열과 유사한 메서드를 제공하여 선택된 요소들에 반복하고 필터링할 수 있습니다. 이를 통해 선택된 요소들과 상호작용하거나 특정 조건에 따라 필요한 요소들을 선택할 수 있습니다.

QueryList는 Angular의 ViewChildren 및 ContentChildren 기능과 함께 주로 사용됩니다. @ViewChildren는 컴포넌트의 자식 요소들 중에서 특정 조건을 만족하는 요소들을 선택하고 QueryList로 반환합니다. @ContentChildren는 컴포넌트의 템플릿 내에서 특정 조건을 만족하는 요소들을 선택하고 QueryList로 반환합니다.

즉, QueryList는 Angular의 컴포넌트와 템플릿 간의 상호작용을 간편하게 처리하기 위한 강력한 도구입니다. QueryList를 사용하면 컴포넌트에서 자식 요소들을 선택하고 조작하거나 템플릿에서 특정 조건을 만족하는 요소들을 선택하여 동적인 작업을 수행할 수 있습니다.

물론입니다! 다음은 QueryList를 사용하는 코드 예시입니다.

import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <div>
      <h1>Parent Component</h1>
      <div #item class="child-item">Item 1</div>
      <div #item class="child-item">Item 2</div>
      <div #item class="child-item">Item 3</div>
    </div>
  `,
})
export class ParentComponent {
  @ViewChildren('item') items: QueryList<ElementRef>;

  ngAfterViewInit() {
    this.items.map(item => {
      console.log(item.nativeElement.textContent);
    });
  }
}

위의 예시에서 ParentComponent는 @ViewChildren 데코레이터를 사용하여 items라는 QueryList<ElementRef>를 정의합니다. @ViewChildren에는 선택자 item을 전달하여 템플릿 내에서 #item으로 정의된 요소들을 선택합니다.

ngAfterViewInit 메서드에서 items.forEach를 사용하여 QueryList에 있는 각 ElementRef에 대해 반복하고 선택된 요소들의 텍스트 내용을 콘솔에 출력합니다.

이 예시에서 items는 QueryList 객체로 선택된 요소들을 담고 있습니다. QueryList는 자식 요소들을 자동으로 감지하고 업데이트하기 때문에 ngAfterViewInit 이후에 선택된 요소들에 접근할 수 있습니다.

이와 같이 QueryList를 사용하면 선택된 요소들을 간단하게 반복하거나 조작할 수 있습니다. QueryList는 forEach, filter, map 등의 메서드를 지원하므로 선택된 요소들에 대한 다양한 작업을 수행할 수 있습니다.