Bootstrap

앵귤러의 기본적인 동작원리
처음 앵귤러를 실행하게 되면 어떻게 동작을 할까??

2. Zone.js와 변화 감지

부트스트랩 이후에는 어떻게 동작을 할까?
최초 부트스트랩 과정을 진행하여 초기 로드를 마친 후 애플리케이션은 정적인 상태로 대기 를 합니다.
이 정적인 상태를 깨우는 것에는 3가지의 이벤트 가 존재합니다.

비동기로 호출되는 이벤트

1. 사용자 액션
2. Ajax와 같은 이벤트
3. setTimeout, interval 함수

비동기 이벤트가 발생하고 나면 애플리케이션의 상태 중 어딘가가 바뀌었을 것이다.
이러한 비동기 코드가 언제 호출될지 예의 주시하여야 하는데, 이를 위해서 Zone.js 를 사용합니다.

Zone.js

• 앵귤러의 필수 의존 패키지
• 위의 3가지 이벤트가 언제 시작되고 종료되는지 파악가능
• Zone.js를 기반으로 한 NgZone클래스

NgZone클래스

• 데이터 바인딩한 값의 변경 사항을 감지하는 작업

변화 감지 트리와 변화 감지 전략

하나의 컴포넌트에서 클릭 이벤트가 발생하게 되면, 앵귤러는 루트 컴포넌트인 AppComponent부터 모든 컴포넌트까지 전체에서 변화 감지 를 수행합니다.

무엇인가 비효율적일 것만 같지만 앵귤러는 VM 진화적인 코들르 생성하여 아주 짧은 시간 안에 루트부터 최하위 컴포넌트까지 전체 겈포넌트의 변경 사항감지 작업을 단방향으로 실행 합니다.

But

이벤트가 빈번한 애플리케이션에서 전체컴포넌트의 변경 사항을 감지하는 것은 적절한 방식이 아니다. 그래서 이 경우 @Component 옵션에서 ChangeDetection 을 사용하면 됩니다.

  @Component({
    ...
    ChangeDetection :  ChangeDetectionStrategy.OnPush
  })