angular run change detection

angular run change detection

run change detection에 대해

ExpressionChnagedAfterIthasBeenCheckedError

부모 컴포넌트와 자식컴포넌트간의 함수 호출 하다 위와 같은 에러를 경험했다.

위의 에러를 알기 위해서는 다음의 이미지에 대해 이해가 필요하다.

주요 쟁점은 Run change detection이다. Run change detection의 경우 Dom에서 데이터가 이전과 현재에 변경된 내용이 있는지에 대해 체크하고 바뀐 내용이 있을 때 위의 에러를 뿜어 낸다.

나의 상황은 컴포넌트를 활성화를 시키고 dom을 업이트 과정을 겨쳐 change detection하는 시점에 변수를 재할당을 하면서 값을 변경을 해주는 상황에 에러를 뿜었다.

' 이전 value는 ~~~인데 현재 value는 ~~~이다' 에러 메세지에서 알 수가 있다.

하지만 이러한 에러 메세지는 develop 모드에서만 나온다고 한다. 그 이유는 변한 값을 다음 change detection에서 반영될 것이라 판단하여 production에서는 에러를 내뿜지 않는다고 한다.

결론은, 변수 할당에 있어 시점이 lifecycle 흐름에 맞게 할당하는게 중요하다고 생각한다.

lifecycle : ngOnChange -> ngOnInit -> ngAfterViewInit -> startColorPopup ( 내가 만든 함수 호출 )

run chanage detection 이 ngAfterViewInit 이후에 작동

from http://sangwonny.tistory.com/22 by ccl(A) rewrite - 2021-06-16 23:00:25