팁: 이 가이드 문서는 핵심 가이드 이후 내용을 다룹니다. 아직 Angular에 익숙하지 않다면 해당 문서를 먼저 읽어보세요.
변화 감지 정책
@Component 데코레이터의 changeDetection 옵션을 지정하면 변화 감지 모드 를 설정할 수 있습니다.
변화 감지 모드는 두 가지가 있습니다.
기본 모드는 ChangeDetectionStrategy.Default 입니다.
이 모드를 지정하면 Angular가 전역 범위의 컴포넌트 DOM을 모두 검사하고 갱신합니다.
변화 감지는 사용자의 상호작용, 네트워크 응답, 타이머 만료 등으로 동작합니다.
ChangeDetectionStrategy.OnPush 모드를 사용하면 성능 최적화를 위해 변화 감지 검사를 줄입니다.
이 모드를 지정하면 이런 경우만 검사합니다:
- 템플릿에 바인딩된 입력 프로퍼티가 변경될 때
- 컴포넌트의 이벤트 리스너가 실행될 때
- 컴포넌트가
ChangeDetectorRef.markForCheck로 명확하게 지정되어 있거나AsyncPipe등으로 랩핑되어 있을 때
추가로, OnPush 컴포넌트에서 변화가 발생하면 Angular는 애플리케이션 트리를 따라 모든 부모 컴포넌트를 함께 검사합니다.
공백문자 유지
기본적으로 Angular는 템플릿에 존재하는 공백문자 중 너무 많은 줄바꿈과 들여쓰기 등 과도한 공백문자를 제거합니다.
이 동작은 컴포넌트 메타데이터에서 preserveWhitespaces 옵션을 true로 지정하면 변경할 수 있습니다.
커스텀 엘리먼트 스키마
기본적으로 Angular는 식별할 수 없는 HTML 엘리먼트를 발견하면 에러를 발생시킵니다.
이 동작은 컴포넌트 메타데이터에서 schemas 옵션을 CUSTOM_ELEMENTS_SCHEMA를 추가하면 비활성화 할 수 있습니다.
import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';@Component({ ..., schemas: [CUSTOM_ELEMENTS_SCHEMA], template: '<some-unknown-component></some-unknown-component>'})export class ComponentWithCustomElements { }
이렇게 구현하면 Angular는 모든 스키마 지원을 비활성화 합니다.