Angular의 change detection은 어떻게 동작하며, OnPush는 무엇을 하나요?

Question

Accepted Answer

**Change detection**은 Angular가 DOM을 컴포넌트 데이터와 동기화 상태로 유지하는 방법입니다. 상태를 변경할 수 있는 모든 이벤트 이후, 컴포넌트를 검사하고 데이터가 변경된 곳에서 뷰를 업데이트합니다. 기본적으로 이 검사는 광범위하며, **`OnPush`**는 성능을 위해 그 범위를 좁힙니다.

## 기본 change detection 동작 방식

```text
비동기 이벤트 발생 (클릭, HTTP 응답, setTimeout) →
Zone.js가 Angular에 알림 → Angular가 전체 컴포넌트 트리를 위에서 아래로 검사 →
값이 변경된 바인딩을 업데이트.
```

기본적으로(`Default` 전략) Angular는 모든 이벤트에서 **모든 컴포넌트**를 다시 검사합니다. 올바르지만, 대규모 트리에서는 잠재적으로 낭비입니다.

## OnPush — 변경될 수 없는 컴포넌트는 건너뛴다

```ts
import { ChangeDetectionStrategy, Component } from "@angular/core";

@Component({
  selector: "app-user",
  changeDetection: ChangeDetectionStrategy.OnPush, // 옵트인
  template: `{{ user.name }}`,
})
export class UserComponent {
  @Input() user!: User;
}
```

`OnPush`를 사용하면, Angular는 다음 중 하나가 일어나지 않는 한 이 컴포넌트 검사를 **건너뜁니다**.

```text
1. @Input 참조가 변경됨 (동일 객체의 변형이 아닌 새 객체)
2. 컴포넌트 내부에서 이벤트가 발생함 (클릭 등)
3. async pipe로 바인딩된 Observable이 값을 방출함
4. markForCheck()를 수동으로 호출함
```

이는 대규모 트리에서 작업량을 극적으로 줄일 수 있습니다. Angular는 변경될 수 없다고 아는 서브트리 전체를 무시합니다.

## 핵심 함정: 불변성이 필요함

```ts
// ❌ 변형은 참조를 바꾸지 않음 → OnPush가 감지하지 못함
this.user.name = "Bob";

// ✅ 새 객체 생성 → 참조 변경 → OnPush가 업데이트
this.user = { ...this.user, name: "Bob" };
```

`OnPush`는 입력에 대해 **참조 변경**에 의존하므로, 상태를 불변하게(새 객체/배열) 업데이트해야 합니다. 제자리 변형은 고전적인 OnPush 버그입니다. 뷰가 업데이트되지 않습니다.

## 수동 제어

```ts
constructor(private cdr: ChangeDetectorRef) {}
this.cdr.markForCheck();   // 다음 검사를 위해 이 컴포넌트를 표시
this.cdr.detectChanges();   // 지금 change detection 실행
```

## 미래: signal + zoneless

Signal은 훨씬 정밀하고 **세밀한** 업데이트를 가능하게 하여(변경된 signal을 읽는 뷰만), Zone.js를 완전히 제거하는 방향을 가리킵니다.

## 왜 중요한가

Change detection은 Angular 성능의 핵심입니다.

기본 전략이 전체 트리를 검사한다는 점과, `OnPush` + 불변 데이터가 입력이 실제로 변경된 컴포넌트로 검사를 제한한다는 점을 이해하는 것은 대규모 앱을 최적화하는 주요 레버입니다.

불변성 요구사항은 "왜 내 뷰가 업데이트되지 않는가?" 버그의 빈번한 원천이며, signal은 Angular가 더욱 세밀하고 효율적인 reactivity를 향해 나아가는 방향을 나타냅니다.