더 나은 사용자 환경을 위해 더 빠른 변경 감지 구현
Minko Gechev
Angular는 데이터 모델의 변경사항이 앱의 뷰에 반영되도록 주기적으로 변경 감지 메커니즘을 실행합니다. 변경사항 감지는 수동으로 또는 비동기 이벤트 (예: 사용자 상호작용 또는 XHR 완료)를 통해 트리거할 수 있습니다.
변경사항 감지는 강력한 도구이지만 너무 자주 실행하면 많은 계산이 트리거되고 기본 브라우저 스레드가 차단될 수 있습니다.
이 게시물에서는 애플리케이션의 일부를 건너뛰고 필요한 경우에만 변경 감지를 실행하여 변경 감지 메커니즘을 제어하고 최적화하는 방법을 알아봅니다.
Angular의 변경 감지 내부
Angular의 변경 감지 작동 방식을 이해하기 위해 샘플 앱을 살펴보겠습니다.
앱의 코드는 이 GitHub 저장소에서 확인할 수 있습니다.
이 앱은 회사의 두 부서(영업 및 R&D)의 직원을 나열하며 다음 두 가지 구성요소가 있습니다.
AppComponent(앱의 루트 구성요소)EmployeeListComponent인스턴스가 두 개 있습니다. 하나는 영업용이고 하나는 R&D용입니다.