@ViewChild와 @ViewChildren (1)

Angular @ViewChild와 @ViewChildren 

Angular에서는 부모 컴포넌트가 자식 컴포넌트나 특정 DOM 요소에 접근할 수 있도록 @ViewChild와 @ViewChildren 데코레이터를 제공합니다.

 

@ViewChild 개념과 기본 사용법

@ViewChild란?

@ViewChild는 부모 컴포넌트에서 자식 컴포넌트나 특정 템플릿 요소를 선택하여 해당 요소나 컴포넌트의 속성 및 메서드에 직접 접근할 수 있도록 해줍니다.

@ViewChild 기본 사용법

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <h1 #titleElement>안녕하세요, Angular!</h1>
    <button (click)="changeTitle()">제목 변경</button>
  `,
})
export class ExampleComponent implements AfterViewInit {
  @ViewChild('titleElement') title!: ElementRef;

  ngAfterViewInit() {
    console.log(this.title.nativeElement.textContent); // "안녕하세요, Angular!"
  }

  changeTitle() {
    this.title.nativeElement.textContent = '변경된 제목';
  }
}

 

• @ViewChild('titleElement') title!: ElementRef; → #titleElement로 지정된 요소를 ElementRef를 통해 가져옵니다.
• ngAfterViewInit()에서 해당 요소의 textContent를 확인할 수 있습니다.
• changeTitle()을 통해 버튼 클릭 시 h1 요소의 내용을 변경할 수 있습니다.

---

@ViewChildren 개념과 기본 사용법

@ViewChildren란?

@ViewChildren은 여러 개의 자식 요소를 선택할 때 사용됩니다.

선택된 요소들은 QueryList라는 특별한 객체로 관리됩니다.

@ViewChildren 기본 사용법

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

@Component({
  selector: 'app-example',
  template: `
    <p #paragraph>첫 번째 문장</p>
    <p #paragraph>두 번째 문장</p>
    <button (click)="changeTexts()">모두 변경</button>
  `,
})
export class ExampleComponent implements AfterViewInit {
  @ViewChildren('paragraph') paragraphs!: QueryList<ElementRef>;

  ngAfterViewInit() {
    this.paragraphs.forEach((p, index) => {
      console.log(`Paragraph ${index + 1}:`, p.nativeElement.textContent);
    });
  }

  changeTexts() {
    this.paragraphs.forEach((p, index) => {
      p.nativeElement.textContent = `변경된 문장 ${index + 1}`;
    });
  }
}

• @ViewChildren('paragraph') paragraphs!: QueryList<ElementRef>; → #paragraph를 가진 모든 <p> 요소를 선택합니다.
• QueryList.forEach()를 사용하여 모든 요소의 내용을 변경할 수 있습니다.
• changeTexts() 버튼 클릭 시 모든 문장의 내용이 변경됩니다.

---

@ViewChild, @ViewChildren 비교

특징	@ViewChild	@ViewChildren
대상	단일 요소 또는 컴포넌트	여러 개의 요소 또는 컴포넌트
반환 타입	ElementRef 또는 컴포넌트 인스턴스	`QueryList<ElementRefComponent>`
사용 가능 시점	ngAfterViewInit 이후	ngAfterViewInit 이후