Angular의 구성요소 수명주기

Angular 수명 주기 후크는 개발자가 생성부터 초기화, 변경, 소멸을 포함하는 소멸까지 Angular 구성 요소 수명 주기의 주요 순간을 활용할 수 있도록 하는 방법입니다. 가장 일반적으로 사용되는 수명 주기 후크는 다음과 같습니다.

1. 생성자: 페이지가 처음 로드될 때 호출됩니다. 한 번만 호출됩니다.
2. ngOnChanges: 여러 번 실행합니다. 처음에는 구성 요소가 생성/로드될 때 실행됩니다. 이 후크가 호출될 때마다 @input 데코레이터를 사용하여 사용자 정의 속성이 변경되는 경우. 인수로 작업 - 간단한 변경
3. ngOnInit: 구성 요소가 초기화되면 호출됩니다. 구성 요소의 상태를 설정하는 데 적합합니다.
4. ngDoCheck: 변경 사항을 수동으로 감지하는 데 사용됩니다(각 변경 감지 주기마다 호출됨).
5. ngAfterContentInit: 콘텐츠가 구성 요소에 프로젝션된 후 호출됩니다.
6. ngAfterContentChecked: 투영된 콘텐츠를 확인한 후 호출됩니다.
7. ngAfterViewInit: 뷰가 초기화된 후 호출됩니다.
8. ngAfterViewChecked: Angular가 구성요소의 뷰를 확인한 후 호출됩니다.
9. ngOnDestroy: 구성 요소가 삭제되기 직전에 호출됩니다. Observable 구독 취소와 같이 리소스를 정리하는 데 사용하세요.

들어가기 전에 필수 프로젝트를 만들어 보겠습니다.
부모와 자식 구성 요소가 필요합니다. 상위 구성 요소에 입력 필드가 있으며 해당 입력 값을 하위 구성 요소에 전달하고 하위 구성 요소에 표시합니다.

parent.comComponent.ts

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  value:string = '';
  SubmitValue(val: any) {
    this.value = val.value;
  }

}

parent.comComponent.html

<h1 id="Lifecycle-Hooks">Lifecycle Hooks</h1>

<input type="text" placeholder="Input here...">
<button>Submit Value</button>

<br><br>
<app-child></app-child>

child.comComponent.ts

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  constructor() { }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {
  }

}

child.comComponent.html

<div>
    Input Value: <strong>{{inputValue}}</strong>
</div>

다음과 같이 출력됩니다.

1.생성자

• 생성자는 구성 요소를 초기화하는 데 사용되는 TypeScript 클래스 메서드입니다. Angular 수명 주기 후크 이전에 호출됩니다.
• 주요 용도: 종속성 주입을 초기화하고 변수를 설정합니다.

export class ChildComponent implements OnInit {

  constructor() {
    **console.log("Constructor Called");**
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {}

}

2.ngOnChanges

• 구성요소의 입력 속성이 변경될 때 호출됩니다.
• 입력 속성의 이전 값과 현재 값을 포함하는 SimpleChanges 객체를 제공합니다.
• 사용법: 이 후크를 트리거하려면 상위 구성 요소의 데이터 입력 속성을 업데이트하세요.

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  value:string = '';
  SubmitValue(val: any) {
    this.value = val.value;
  }

}

다시 값을 입력하고 다시 ngOnChanges를 호출했지만 생성자는 한 번만 호출되었습니다.

changes 인수에 무엇이 있는지 살펴보겠습니다.

<h1 id="Lifecycle-Hooks">Lifecycle Hooks</h1>

<input type="text" placeholder="Input here...">
<button>Submit Value</button>

<br><br>
<app-child></app-child>

몇 가지 값을 넣어 살펴보겠습니다.

3.ngOnInit

• 첫 번째 ngOnChanges 이후 한 번 호출됩니다.
• 주요 용도: 구성 요소를 초기화하고 렌더링에 필요한 데이터를 설정합니다.

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  constructor() { }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {
  }

}

4.ngDoCheck

• Angular가 구성 요소나 해당 하위 항목의 변경 사항을 감지할 때마다 실행됩니다.
• 사용자 정의 변경 감지 로직에 사용하세요.

<div>
    Input Value: <strong>{{inputValue}}</strong>
</div>

5.ngAfterContentInit

• 콘텐츠(예: )가 구성 요소에 프로젝션된 후 한 번 호출됩니다.

child.comComponent.html

export class ChildComponent implements OnInit {

  constructor() {
    **console.log("Constructor Called");**
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {}

}

parent.comComponent.html

export class ChildComponent implements OnInit, OnChanges {

  constructor() {
    console.log("Constructor Called");
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log("ngOnChanges Called");
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {}

}

child.comComponent.ts

 ngOnChanges(changes: SimpleChanges): void {
    console.log("ngOnChanges Called", changes);
  }

6.ng콘텐츠 확인 후

• 투영된 내용을 확인할 때마다 호출됩니다.
• 성능 문제를 방지하려면 드물게 사용하세요.

export class ChildComponent implements OnInit, OnChanges {

  constructor() {
    console.log("Constructor Called");
  }
  ngOnChanges(changes: SimpleChanges): void {
    console.log("ngOnChanges Called");
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {
    console.log("ngOnInit Called");
  }

}

이 문제를 해결해 보겠습니다.

export class ChildComponent implements OnInit, OnChanges, DoCheck {

  constructor() {
    console.log("Constructor Called");
  }
  ngOnChanges(changes: SimpleChanges): void {
    console.log("ngOnChanges Called", changes);
  }

  @Input() inputValue: string = "LifeCycle Hooks";

  ngOnInit(): void {
    console.log("ngOnInit Called");
  }

  ngDoCheck() {
    console.log("ngDoCheck Called");
  }

}

ng-content에 다시 변경이 있으면 ngAfterContentChecked가 호출됩니다.

7.ngAfterViewInit

• 구성요소의 뷰와 해당 하위 뷰가 초기화된 후 한 번 호출됩니다.
• 타사 라이브러리 초기화 또는 DOM 조작에 유용합니다.

8.ngViewChecked

• 구성 요소의 뷰와 해당 하위 뷰를 확인할 때마다 호출됩니다.

9.ngOnDestroy

• 컴포넌트가 소멸되기 직전에 호출됩니다.
• Observable 구독 취소 또는 이벤트 리스너 분리와 같은 정리 작업에 사용하세요.

ngOnDestroy는 구성 요소를 삭제할 때만 호출되므로 구성 요소 삭제 버튼을 클릭하면 하위 구성 요소를 제거해 보겠습니다.
준비합시다:

parent.comComponent.ts

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  value:string = '';
  SubmitValue(val: any) {
    this.value = val.value;
  }

}

parent.comComponent.html

<h1 id="Lifecycle-Hooks">Lifecycle Hooks</h1>

<input type="text" placeholder="Input here...">
<button>Submit Value</button>

<br><br>
<app-child></app-child>

구성요소 삭제 버튼을 클릭하기 전에:

구성요소 삭제 버튼을 클릭한 후:

수명주기 후크 순서:

1. 건축자
2. ngOnChanges(@Input 속성이 있는 경우)
3. ngOnInit
4. ngDoCheck
5. ngAfterContentInit
6. 콘텐츠 확인 후
7. ngAfterViewInit
8. ngAfterViewChecked
9. ngOnDestroy

이러한 후크를 효과적으로 이해하고 사용하면 수명 주기의 다양한 단계에서 구성 요소의 동작을 관리할 수 있습니다.

위 내용은 Angular의 구성요소 수명주기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!