[Angular] ExpressionChangedAfterItHasBeenCheckedError

발생 원인

1. 자식 Component에서 부모 Component의 값을 변경하는 경우
2. ngAfterViewInit을 이용하여 값을 변경한 경우

에러 발생 과정

1. Develop 모드에서 변화가 감지되었을 때, Change Detaction이 발생하고 부모 Component부터 체크한다.
2. OldValue[0]에 값이 저장된다.
3. OldValue에 저장했던 값과 현재 값을 비교하여 값이 다르면 ExpressionChangedAfterItHasBeenCheckedError를 발생한다.

에러가 발생하는 과정은 위의 3가지가 핵심이다.

 

Angular의 완결함으로 인해 lifecycle이 종료되지 않은 상황에서 lifecycle 시작 단계의 값과 중간 단계의 값이 다르기 때문에 에러가 발생한다.

해결 방법

• 비동기 처리 핵(hack) : JVM 콜 스택 마지막에 값을 변경하는 방법으로 setTimeout에 시간을 지정하지 않으면 JVM의 콜 스택 마지막에 등록이 된다.
  

  ...
  
  public isOk: boolean = false;
  
  ngAfterViewInit() {
  	setTimeout(() => {
      	this.isOk = !this.isOk;
      }
  }
  
  ...​

• ChangeDetectorRef 서비스 : 부모 Component의 ngAfterViewInit 단계에서 강제로 Change Detection를 발생시켜 check 과정을 취소하고 자식 Component에서 변경된 값으로 Check 한다.
  

  ...
  
  constructor(private changeDetector: ChangeDetectorRef) {}
  
  ngAfeterViewInit() {
  	this.changeDetector.detectChanges();
  }
  
  ...​

 

참고 자료

• https://blog.eunsatio.io/develop/ExpressionChangedAfterItHasBeenCheckedError-%ED%95%B8%EB%93%A4%EB%A7%81

Slacking studio x BLOG

• https://sddev.tistory.com/105

ExpressionChangedAfterItHasBeenCheckedError 에러에 대하여