03 라이프사이클 후크(Lifecycle hooks) 05

OnChanges ()

Angular는 컴포넌트(또는 디렉티브)의 입력 프로퍼티에 대한 변경 사항을 감지 할 때마다 해당 ngOnChanges() 메서드를 호출합니다. 이 예제는 OnChanges 훅을 모니터링합니다.

on-changes.component.ts (excerpt)

ngOnChanges(changes: SimpleChanges) {   for (let propName in changes) {     let chng = changes[propName];     let cur  = JSON.stringify(chng.currentValue);     let prev = JSON.stringify(chng.previousValue);     this.changeLog.push(`${propName}: currentValue = ${cur}, previousValue = ${prev}`);   } }

ngOnChanges() 메서드는 변경된 각 프로퍼티 이름을 현재 및 이전 속성 값이 들어있는 SimpleChange 객체에 매핑하는 객체를 사용합니다. 이 후크는 변경된 프로퍼티를 반복하고 로그합니다.

예제 컴포넌트 인 OnChangesComponent에는 두 가지 입력 프로퍼티 인 hero 및 power가 있습니다.

src/app/on-changes.component.ts

@Input() hero: Hero; @Input() power: string;

호스트 OnChangesParentComponent는 다음과 같이 바인딩합니다.

src/app/on-changes-parent.component.html

<on-changes [hero]="hero" [power]="power"></on-changes>

다음은 사용자가 변경 중인 샘플입니다.

로그 항목은 power 프로퍼티 변경의 문자열 값으로 나타납니다. 그러나 ngOnChanges는 hero.name에 대한 변화를 포착하지 않습니다. 처음에는 놀랍습니다.

Angular는 입력 프로퍼티 값이 변경 될 때만 후크를 호출합니다. hero 프로퍼티의 값은 영웅 객체에 대한 참조입니다. Angular는 영웅 자신의 name 프로퍼티가 바뀌어도 상관하지 않습니다. 영웅 객체 참조가 변경되지 않았으므로 Angular의 관점에서는 보고 할 변경 사항이 없습니다!