변경 감지 작동 방식
Angular의 변경 감지 주기를 이해합니다.
변경 감지 작동 방식은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
변경 감지란?
변경 감지는 Angular가 DOM을 컴포넌트 상태와 동기화하는 과정입니다. 데이터가 변경되면 Angular는 바인딩을 다시 평가하고 달라진 부분만 업데이트합니다.
감지 주기
Angular는 루트부터 아래 방향으로 컴포넌트 트리를 순회하며 각 컴포넌트의 바인딩을 확인합니다. 이 하향식 과정이 하나의 변경 감지 주기(틱)입니다.
틱을 트리거하는 것은?
기본적으로 Angular는 비동기 이벤트 후에 변경 감지를 실행합니다. 여기에는 DOM 이벤트, 타이머, HTTP 응답이 포함됩니다. 이 작업은 Zone.js가 조정합니다.
Zone.js
Zone.js는 비동기 API(setTimeout, addEventListener, Promise, XHR)를 몽키 패치하여 작업이 완료되고 틱이 필요한 시점을 Angular가 알 수 있게 합니다.
// Patched by Zone.js:
setTimeout(() => this.count++, 1000);
// After the timer, Angular runs change detection.NgZone
NgZone은 Angular를 위해 Zone.js를 감쌉니다. 자주 실행되는 반복문에서 변경 감지가 트리거되지 않도록 Angular 영역 바깥에서 코드를 실행할 수 있습니다.
private zone = inject(NgZone);
this.zone.runOutsideAngular(() => {
// heavy work, no CD triggered
});영역에 다시 진입하기
영역 바깥에서 UI를 업데이트하려면 run으로 영역에 다시 진입하여 Angular가 틱을 예약하도록 하세요.
this.zone.run(() => {
this.ready = true;
});기본 전략
기본 전략에서는 모든 틱마다 모든 컴포넌트를 확인합니다. 간단하고 안전하지만 큰 트리에서는 불필요한 작업이 될 수 있습니다.
바인딩 비교
Angular는 Object.is를 사용하여 각 바인딩의 현재 값을 이전 값과 비교합니다. 변경되지 않았다면 DOM을 건드리지 않습니다.
표현식은 순수해야 합니다
템플릿 표현식은 확인할 때마다 실행되므로 빠르고 부수 효과가 없어야 합니다. 템플릿에서 비용이 큰 함수를 직접 호출하지 마세요.
<!-- Avoid: runs every tick -->
<p>{{ computeExpensiveTotal() }}</p>ExpressionChangedAfterChecked
개발 모드에서 Angular는 두 번째 검증 과정을 실행합니다. 두 과정 사이에 값이 변경되면 ExpressionChangedAfterItHasBeenCheckedError가 발생하며, 이는 렌더링 중에 상태가 변경되었음을 의미합니다.
수동 제어
ChangeDetectorRef를 주입하여 감지를 제어하세요. markForCheck(), detectChanges(), detach()를 사용하면 세밀하게 제어할 수 있습니다.
private cdr = inject(ChangeDetectorRef);
this.cdr.detectChanges();빠른 확인
변경 감지에 대한 이해도를 확인해 보세요.
복습
변경 감지는 상태를 DOM과 동기화하는 하향식 트리 순회이며, Zone.js/NgZone을 통한 비동기 이벤트로 트리거되고, Object.is로 바인딩을 비교한다는 것을 배웠습니다. ChangeDetectorRef를 사용하면 수동으로 제어할 수 있습니다.
자주 묻는 질문
“변경 감지 작동 방식” 강의는 무료인가요?
네 — “변경 감지 작동 방식” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“변경 감지 작동 방식”에서 뭘 배우나요?
Angular의 변경 감지 주기를 이해합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“변경 감지 작동 방식” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 변경 감지 작동 방식
- OnPush 변경 감지
- Zone.js 없는 Angular
- 목록과 렌더링 최적화