# Change Detection (Angular)

> Zone.js, change detection 전략, OnPush 전략, ChangeDetectorRef, markForCheck, detectChanges, 성능 최적화

- 20 면접 질문
- Mid-Level
- [면접 질문: Angular](https://sharpskill.dev/ko/technologies/angular/interview-questions.md)

## 1. Angular의 change detection 메커니즘이란 무엇입니까?

**답변**

Change detection은 Angular가 애플리케이션 상태의 변경을 감지하고 그에 따라 DOM을 업데이트하는 프로세스입니다. 기본적으로 Angular는 Zone.js를 사용하여 비동기 이벤트(clicks, HTTP requests, timers)를 자동으로 감지하고 루트부터 컴포넌트 검사를 트리거합니다. 이 검사는 컴포넌트 트리를 순회하여 DOM에 적용할 수정 사항을 식별합니다.

## 2. Angular change detection에서 Zone.js의 역할은 무엇입니까?

**답변**

Zone.js는 브라우저의 네이티브 비동기 API(setTimeout, Promise, addEventListener 등)에 패치를 적용하여 실행을 가로채는 라이브러리입니다. 비동기 작업이 완료되면 Zone.js가 Angular에 알리고, Angular는 루트 컴포넌트에서 자동으로 change detection을 트리거합니다. 이를 통해 Angular는 개발자의 수동 개입 없이 변경 사항을 감지할 수 있습니다.

## 3. Default 전략과 OnPush 전략의 차이점은 무엇입니까?

**답변**

Default 전략은 모든 change detection 사이클에서 트리의 모든 컴포넌트를 검사하므로 비용이 많이 들 수 있습니다. OnPush는 input이 변경되거나(불변 참조), 템플릿에서 이벤트가 발생하거나, async pipe가 새 값을 받거나, markForCheck()가 수동으로 호출될 때만 컴포넌트를 검사하여 최적화합니다. OnPush는 검사 횟수를 크게 줄이고 성능을 향상시킵니다.

## 17개 추가 질문 이용 가능

- 컴포넌트에서 OnPush 전략을 활성화하는 방법은?
- Angular 컴포넌트에서 ChangeDetectorRef의 목적은 무엇입니까?

무료로 가입하기: https://sharpskill.dev/ko/login

## 기타 Angular 면접 주제

- [TypeScript 기초](https://sharpskill.dev/ko/technologies/angular/interview-questions/typescript-basics.md): 25개 질문, Junior
- [TypeScript 고급](https://sharpskill.dev/ko/technologies/angular/interview-questions/typescript-advanced.md): 20개 질문, Junior
- [Angular 기초](https://sharpskill.dev/ko/technologies/angular/interview-questions/angular-fundamentals.md): 20개 질문, Junior
- [컴포넌트와 라이프사이클](https://sharpskill.dev/ko/technologies/angular/interview-questions/components-lifecycle.md): 20개 질문, Junior
- [Services & Dependency Injection](https://sharpskill.dev/ko/technologies/angular/interview-questions/services-dependency-injection.md): 20개 질문, Junior
- [Angular 모듈 구성](https://sharpskill.dev/ko/technologies/angular/interview-questions/modules-organization.md): 22개 질문, Mid-Level
- [Angular CLI](https://sharpskill.dev/ko/technologies/angular/interview-questions/angular-cli.md): 18개 질문, Junior
- [디렉티브와 Pipe](https://sharpskill.dev/ko/technologies/angular/interview-questions/directives-pipes.md): 22개 질문, Mid-Level
- [라우팅과 내비게이션](https://sharpskill.dev/ko/technologies/angular/interview-questions/routing-navigation.md): 24개 질문, Mid-Level
- [리액티브 폼](https://sharpskill.dev/ko/technologies/angular/interview-questions/forms-reactive.md): 26개 질문, Mid-Level
- [템플릿 기반 폼](https://sharpskill.dev/ko/technologies/angular/interview-questions/forms-template-driven.md): 16개 질문, Mid-Level
- [RxJS 기초](https://sharpskill.dev/ko/technologies/angular/interview-questions/rxjs-fundamentals.md): 22개 질문, Mid-Level
- [RxJS 연산자](https://sharpskill.dev/ko/technologies/angular/interview-questions/rxjs-operators.md): 24개 질문, Mid-Level
- [HttpClient 및 API 호출](https://sharpskill.dev/ko/technologies/angular/interview-questions/http-client.md): 22개 질문, Mid-Level
- [기본 상태 관리](https://sharpskill.dev/ko/technologies/angular/interview-questions/state-management-basics.md): 20개 질문, Mid-Level
- [Angular Signals](https://sharpskill.dev/ko/technologies/angular/interview-questions/angular-signals.md): 20개 질문, Mid-Level
- [Standalone Components](https://sharpskill.dev/ko/technologies/angular/interview-questions/standalone-components.md): 18개 질문, Mid-Level
- [Angular 단위 테스트](https://sharpskill.dev/ko/technologies/angular/interview-questions/testing-unit.md): 22개 질문, Mid-Level
- [엔드투엔드 테스팅](https://sharpskill.dev/ko/technologies/angular/interview-questions/testing-e2e.md): 18개 질문, Mid-Level
- [빌드 및 최적화](https://sharpskill.dev/ko/technologies/angular/interview-questions/build-optimization.md): 20개 질문, Mid-Level
- [NgRx 기초](https://sharpskill.dev/ko/technologies/angular/interview-questions/ngrx-fundamentals.md): 24개 질문, Senior
- [NgRx 고급](https://sharpskill.dev/ko/technologies/angular/interview-questions/ngrx-advanced.md): 24개 질문, Senior
- [Angular 아키텍처](https://sharpskill.dev/ko/technologies/angular/interview-questions/angular-architecture.md): 22개 질문, Senior
- [성능 최적화](https://sharpskill.dev/ko/technologies/angular/interview-questions/performance-optimization.md): 22개 질문, Senior
- [보안 및 모범 사례](https://sharpskill.dev/ko/technologies/angular/interview-questions/security-best-practices.md): 20개 질문, Senior
- [고급 RxJS 패턴](https://sharpskill.dev/ko/technologies/angular/interview-questions/advanced-rxjs-patterns.md): 22개 질문, Senior
- [Angular Universal 및 SSR](https://sharpskill.dev/ko/technologies/angular/interview-questions/angular-universal-ssr.md): 20개 질문, Senior
- [Angular 마이크로 프론트엔드](https://sharpskill.dev/ko/technologies/angular/interview-questions/micro-frontends-angular.md): 20개 질문, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/ko/technologies/angular/interview-questions/change-detection