[Angular] @ViewChild

@ViewChild의 정의 

@ViewChild는 Angular의 코어 라이브러리에서 제공하는 데코레이터 중 하나로, 자식 컴포넌트나 DOM 요소에 직접 접근할 수 있는 기능을 제공합니다. 이 데코레이터를 활용함으로써, 우리는 컴포넌트의 뷰에 위치한 자식 요소들에 대한 직접적인 제어를 할 수 있게 되는데, 이는 웹 애플리케이션의 동적인 행동을 쉽게 구현하는 데 큰 도움이 됩니다. 

 

@ViewChild의 사용 방법

// @ViewChild(탐색 대상 클래스명) 프로퍼티명: 탐색 대상 클래스명;

@ViewChild(Pane)
  set pane(v: Pane) {
    setTimeout(() => {
      this.selectedPane = v.id;
    }, 0);
  }
  
  @Component({
    selector: 'test',
    template: `               
          <textbox class="input" #AccountInput placeholder="'Input Value.'" [(value)]="account"></textbox>
	`,
    styleUrls: ['./login.component.scss'],
})
export class TESTComponent implements OnDestroy, AfterViewInit {
	...
    pubic inputText:string = '';
    @ViewChild('AccountInput')
    set accountTextBox(v: TextBox) {
      	this.inputText = v.value;
      }
  }
    ... 
 }

위의 코드는 ChildComponent라는 이름의 자식 컴포넌트에 child라는 참조 이름을 부여하는 것을 나타냅니다. 이로써 우리는 이 child라는 참조를 통해 ChildComponent의 메서드를 호출하거나, 프로퍼티를 변경하는 등의 작업을 수행할 수 있게 됩니다.

 

Template에 있는 AccountInput라는 ID로 할당된 Template 레퍼런스를 매개변수로 받아 set을 통해 변수에 값을 할당하는 등 원하는 작업을 할 수 있습니다.

 

@ViewChild의 생명주기 

@ViewChild는 Angular의 컴포넌트 생명주기에 따라 값이 설정됩니다. 일반적으로 ngOnInit 단계에서는 아직 @ViewChild가 설정되지 않았기 때문에 사용할 수 없습니다. 그러나 ngAfterViewInit 단계부터는 사용이 가능하며, 이 시점부터 자식 요소에 대한 조작이 가능해집니다.

 

@ViewChild와 @ViewChildren의 차이점 

Angular에서는 @ViewChild 외에도 @ViewChildren이라는 데코레이터를 제공합니다. @ViewChild는 첫번째 자식 요소만을 가져오는 반면, @ViewChildren은 모든 자식 요소를 가져옵니다.