Angular 2
ChangeDetectionStrategy를 사용하여 렌더링 최적화

기본 대 OnPush

하나의 입력 myInput 과 someInternalValue 라는 내부 값을 갖는 다음 구성 요소를 고려하십시오. 두 요소 모두 구성 요소의 템플릿에 사용됩니다.

import {Component, Input} from '@angular/core';

@Component({
  template:`
  <div>
    <p>{{myInput}}</p>
    <p>{{someInternalValue}}</p>
  </div>
  `
})
class MyComponent {
  @Input() myInput: any;

  someInternalValue: any;

  // ...
}

기본적으로 구성 요소 데코레이터의 changeDetection: 속성은 ChangeDetectionStrategy.Default 로 설정됩니다. 이 예제에서 암시 적이다. 이 경우 템플릿의 값을 변경하면 MyComponent 가 다시 렌더링됩니다. 즉, myInput 또는 someInternalValue 변경하면 각도 2가 에너지를 someInternalValue 구성 요소를 다시 렌더링합니다.

그러나 입력이 변경 될 때만 다시 렌더링하기를 원한다고 가정 해보십시오. changeDetection: 과 함께 다음 구성 요소를 고려하십시오. ChangeDetectionStrategy.OnPush 설정 changeDetection:

import {Component, ChangeDetectionStrategy, Input} from '@angular/core';

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
  template:`
  <div>
    <p>{{myInput}}</p>
    <p>{{someInternalValue}}</p>
  </div>
  `
})
class MyComponent {
  @Input() myInput: any;

  someInternalValue: any;

  // ...
}

changeDetection: ChangeDetectionStrategy.OnPush 로 설정하면 MyComponent 는 입력이 변경 될 때만 다시 렌더링됩니다. 이 경우 myInput 은 부모로부터 새 값을 받아 재 렌더링을 트리거해야합니다.