0Pricing
Angular Academy · 강의

OnPush 변경 감지

OnPush 전략으로 검사 횟수를 줄입니다.

OnPush 변경 감지은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

성능 문제

기본 전략은 매 틱마다 모든 컴포넌트를 확인합니다. 대규모 앱에서는 이 작업이 누적됩니다. OnPush는 관련 있는 내용이 변경되지 않는 한 앵귤러가 컴포넌트를 건너뛰도록 합니다.

OnPush 활성화

컴포넌트에서 changeDetection 옵션을 설정합니다.

@Component({
  selector: 'app-user',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '{{ user().name }}'
})
export class UserComponent {}

OnPush가 다시 확인하는 경우

OnPush 컴포넌트는 다음과 같은 경우에만 확인됩니다. @Input 참조가 변경되거나, 템플릿에서 이벤트가 발생하거나, async로 바인딩된 옵저버블이 값을 방출하거나, markForCheck()를 호출한 경우입니다.

입력 참조의 동일성

OnPush는 Object.is를 사용해 입력 참조를 비교합니다. 객체를 직접 변경해도 다시 확인되지 않습니다. 새로운 참조를 전달해야 합니다.

// Mutation: ignored by OnPush
this.user.name = 'New';
// New reference: detected
this.user = { ...this.user, name: 'New' };

불변성이 도움이 됩니다

OnPush는 불변 데이터와 자연스럽게 잘 맞습니다. 참조 확인으로 변경 사항을 안정적으로 감지할 수 있도록 데이터를 직접 변경하지 말고 항상 새 객체나 배열을 만드십시오.

this.items = [...this.items, newItem];

이벤트는 계속 작동합니다

컴포넌트 자체 템플릿에서 발생하는 이벤트(클릭, 입력)는 자동으로 확인 대상으로 표시되므로 추가 코드 없이도 로컬 상호 작용이 작동합니다.

<button (click)="count.set(count() + 1)">+</button>

비동기 파이프

async 파이프는 옵저버블이 값을 방출할 때 markForCheck()를 호출하므로 OnPush가 스트림과 원활하게 작동합니다.

<p>{{ data$ | async }}</p>

markForCheck

일반적인 트리거 외부에서 상태를 업데이트할 때는 markForCheck()를 호출하여 다음 틱에 컴포넌트와 그 상위 컴포넌트가 확인되도록 예약합니다.

private cdr = inject(ChangeDetectorRef);
this.cdr.markForCheck();

시그널과 OnPush

시그널은 OnPush와 통합됩니다. 템플릿에서 시그널을 읽으면 종속성이 등록되고, 시그널을 업데이트하면 컴포넌트가 자동으로 확인 대상으로 표시되므로 수동 호출이 필요하지 않습니다.

count = signal(0);
increment() { this.count.update(c => c + 1); }

OnPush 전파

컴포넌트가 표시되면 해당 컴포넌트와 루트까지 이어지는 모든 상위 컴포넌트가 표시되어 그 경로가 확인됩니다. 그 아래의 하위 컴포넌트는 정상적으로 확인됩니다.

모범 사례

새 컴포넌트에는 OnPush를 기본값으로 사용하십시오. 시그널이나 불변 입력과 함께 사용하면 불필요한 작업이 크게 줄어듭니다.

빠른 확인

OnPush에 대한 이해도를 확인합니다.

복습

ChangeDetectionStrategy.OnPush는 입력 참조가 변경되거나, 템플릿 이벤트가 발생하거나, 비동기 파이프가 값을 방출하거나, markForCheck()를 호출한 경우가 아니면 확인을 건너뛴다는 것을 배웠습니다. OnPush는 불변 데이터 및 시그널과 가장 잘 어울립니다.

자주 묻는 질문

“OnPush 변경 감지” 강의는 무료인가요?

네 — “OnPush 변경 감지” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“OnPush 변경 감지”에서 뭘 배우나요?

OnPush 전략으로 검사 횟수를 줄입니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Angular Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“OnPush 변경 감지” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 변경 감지 작동 방식
  2. OnPush 변경 감지
  3. Zone.js 없는 Angular
  4. 목록과 렌더링 최적화
← Angular Academy(으)로 돌아가기