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

DoCheck()

DoCheck 훅을 사용하여 Angular가 자동으로 인식하지 못하는 변경 사항을 감지하고 조치를 취하십시오.

DoCheck 샘플은 다음과 같이 ngDoCheck() 훅으로 OnChanges 샘플을 확장합니다.

DoCheckComponent (ngDoCheck)

ngDoCheck() {     if (this.hero.name !== this.oldHeroName) {     this.changeDetected = true;     this.changeLog.push(`DoCheck: Hero name changed to "${this.hero.name}" from "${this.oldHeroName}"`);     this.oldHeroName = this.hero.name;   }     if (this.power !== this.oldPower) {     this.changeDetected = true;     this.changeLog.push(`DoCheck: Power changed to "${this.power}" from "${this.oldPower}"`);     this.oldPower = this.power;   }     if (this.changeDetected) {       this.noChangeCount = 0;   } else {       // log that hook was called when there was no relevant change.       let count = this.noChangeCount += 1;       let noChangeMsg = `DoCheck called ${count}x when no change to hero or power`;       if (count === 1) {         // add new "no change" message         this.changeLog.push(noChangeMsg);       } else {         // update last "no change" message         this.changeLog[this.changeLog.length - 1] = noChangeMsg;       }   }     this.changeDetected = false; }

이 코드는 특정 값을 검사하여 현재 상태와 이전 값을 캡처하고 비교합니다. hero나 power에 실질적인 변화가 없을 때 로그에 특별한 메시지를 써서 DoCheck가 얼마나 자주 호출되는지를 볼 수 있습니다. 결과는 다음과 같습니다. :

영웅의 name이 변경되면 ngDoCheck() 훅이 감지 할 수 있지만 엄청난 비용이 듭니다. 이 훅은 변경이 발생한 위치와 관계없이 모든 변경 발생을 감지하기 때문에 엄청난 빈도로 호출됩니다. 이 예제에서는 20 번 이상 호출되어 사용자가 아무 것도 할 수 없습니다.

이러한 초기 검사의 대부분은 Angular가 처음으로 관련없는 데이터를 페이지의 다른 곳에서 표출함으로써 발생됩니다. 다른 <input>에 마우스를 올리면 호출이 시작됩니다. 상대적으로 소수의 호출이 관련 데이터에 대한 실제 변경을 나타냅니다. 분명히 우리의 구현은 매우 가워야 합니다. 그렇지 않으면 사용자 경험이 어려워집니다.