ExpressionChangedAfterItHasBeenCheckedError 에러에 대하여

# ExpressionChangedAfterItHasBeenCheckedError 란?

- 자식 component에서 부모 component의 값을 바꾸는 경우

- product mode에서는 굳이 에러를 던지진 않지만 developer 모드에서는 에러가 발생

- 값 자체는 변경을 해주지만 왜 오류를 발생시킴

- Angular에서 안정적인 UI를 제공하기 위한 설계 중 하나

@Component({

    selector: 'app-parent',

    template: `

        <p>{{name}}</p>

        <app-child [message]="message"></app-child>

    `

})

export class ParentComponent {

    name = 'This is Parent';

    message = 'A message for Child';

- <app-child> 컴포넌트와 해당 컴포넌트를 포함하는 <app-parent> 컴포넌트가 존재하고, message라는 속성을 공유하는 경우

- <app-child>의 ngOninit 함수에서 parent component의 message의 내용을 바꾸려고 할 경우 해당 에러 발생

# 내부 프로세스

1. developer 모드에서 Angular가 변화를 감지했을 때, 그러니까 change detection이 시작되면, Angular는 일단 parent component부터 체크,

그리고 일단 외부로 바인딩 된/되는 값부터 oldValues[0] 같은 식으로 저장

2. child component에 init 명령을 내립니다. 아직 name 프로퍼티에 대한 값이 저장되기 전이므로 child component의 ngOninit에서 parent component의 name 프로퍼티를 직접 바꿔도 에러가 발생하지 않음

3. Angular는 oldValue에 저장했던 값들을 현재 값들과 비교합니다. 그래서 이 단계에서 message의 값이 oldValues에 저장된 값과 다르다면 해당 에러를 던집니다.

1. DOM을 업데이트하고 view를 렌더링하는데, 이때 child component가 ngAfterViewInit 함수로 name 값을 바꾼다면, 마찬가지로 이미 parent component의 name에 대한 oldValue가 지정된 이후이므로 마지막 체크 단계에서 에러를 던집니다.

1. parent component가 child component와 같은 서비스의 프로퍼티를 공유하고 있을 때도 발생합니다. 그렇다면 어떻게 이를 해결할 수 있을까요?

# 해결책

1. 비동기 처리 핵(hack) : JVM의 콜 스택에 맨 마지막에 값을 변경하게끔 만들어 다시 정상적으로 change detection이 작동하게 하는 것

ngOninit() {

    setTimeout(() => this.parentComponent.message = 'message changed!');

}

OR

async ngOninit() {

    await (async (): Promise<void> => {});

 

    this.parentComponent.message = 'message changed!';

}

2. ChangeDetectorRef 서비스를 이용 : parent의 afterViewInit 단계에서 강제로 다시 chnage detection을 하게끔 하는 방법입니다. 그러면 check 단계가 캔슬되고 한 번 다시 값을 체크하겠죠? child component가 앞서 값을 변경했기 때문에 변경된 값으로 체크를 진행

constructor(

    private changeDetector: ChangeDetectorRef

) {}

 

ngAfterViewInit() {

    this.changeDetector.detectChanges();

}

# 출처 

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