Angular는 변경 감지가 완료된 뒤 표현식의 값이 바뀌면 ExpressionChangedAfterItHasBeenCheckedError를 발생시킵니다. 이 오류는 개발 모드에서만 발생합니다.
개발 모드에서 Angular는 변경 감지를 실행할 때마다 추가 검사를 수행하여 바인딩이 바뀌지 않았는지 확인합니다. 이 검사는 뷰가 일관되지 않은 상태로 남는 오류를 찾아냅니다. 예를 들어 메서드나 getter가 호출될 때마다 다른 값을 반환하거나, 자식 컴포넌트가 부모의 값을 변경하면 이런 문제가 발생할 수 있습니다. 어느 경우든 변경 감지가 안정화되지 않았다는 신호입니다. Angular는 데이터가 항상 뷰에 올바르게 반영되도록 이 오류를 발생시켜 UI의 예측할 수 없는 동작이나 무한 루프를 방지합니다.
이 오류는 템플릿 표현식을 추가하거나 ngAfterViewInit, ngOnChanges 같은 라이프사이클 훅을 구현하기 시작할 때 자주 발생합니다. 로딩 상태와 비동기 작업을 처리하거나 자식 컴포넌트가 부모의 바인딩을 변경할 때도 흔히 발생합니다.
오류 디버깅
CLI가 생성하는 소스 맵은 디버깅에 매우 유용합니다. 오류에 표시된 값이 변경되는 템플릿 표현식을 찾을 때까지 호출 스택을 거슬러 올라가세요.
변경 감지가 실행된 뒤에는 템플릿의 바인딩이 바뀌지 않도록 하세요. 사용 사례에 맞는 컴포넌트 라이프사이클 훅을 사용하도록 리팩토링해야 하는 경우가 많습니다. ngAfterViewInit에서 문제가 발생한다면 생성자나 ngOnInit에서 초기값을 설정하거나, 다른 값의 바인딩에는 ngAfterContentInit을 사용하는 것이 권장됩니다.
뷰에서 메서드에 바인딩한다면 해당 메서드 호출이 템플릿의 다른 바인딩을 갱신하지 않는지 확인하세요.
상황에 맞는 해결 방법은 '“ExpressionChangedAfterItHasBeenCheckedError” 오류에 대해 알아야 할 모든 것'에서, 이 검사가 유용한 이유는 'Angular의 “검사 후 표현식이 변경됨” 디버깅: 쉬운 설명과 해결 방법'에서 자세히 알아보세요.