Angular 21 — 새로운 점, 변경된 점

Source: Dev.to

Standalone Components vs. NgModules

Old Way (NgModule‑based)

@NgModule({
  declarations: [UserComponent],
  imports: [CommonModule],
})
export class UserModule {}

Angular 21 Way (Standalone)

@Component({
  selector: 'app-user',
  standalone: true,
  imports: [CommonModule],
  template: `
## User Works!
`
})
export class UserComponent {}

Benefits

• 보일러플레이트 감소
• 의존성 명확화
• 더 쉬운 지연 로딩

Signals for State Management

Replacing a BehaviorSubject

// Before (RxJS)
user$ = new BehaviorSubject(null);

// Angular 21 Signals
user = signal(null);

setUser(data: User) {
  this.user.set(data);
}

Using a signal in a template

Welcome {{ user()?.name }}

• 구독이 필요 없고 메모리 누수도 없으며, 깔끔한 반응성.

Computed Signals

firstName = signal('Mridu');
lastName  = signal('Dixit');

fullName = computed(() => `${this.firstName()} ${this.lastName()}`);

### {{ fullName() }}

Angular는 의존성이 변경될 때마다 자동으로 재계산합니다.

Effects

effect(() => {
  console.log('User changed:', this.user());
});

Common Use Cases for Signals

• 분석 트래킹
• API 호출
• 로깅
• localStorage 동기화

Zoneless Mode (Optional)

앱을 부트스트랩할 때 zoneless 변경 감지를 활성화합니다:

bootstrapApplication(AppComponent, {
  providers: [provideZoneChangeDetection({ eventCoalescing: true })]
});

Result

• 더 빠른 변경 감지
• 더 예측 가능한 업데이트

Signals + zoneless 모드는 추가 설정 없이 성능 향상을 제공하며—Angular CLI가 자동으로 처리합니다.

What You’ll Notice

• 더 빠른 ng serve
• 더 빠른 재빌드
• 메모리 사용량 감소 (특히 대규모 프로젝트에서)

Server‑Side Rendering (SSR) Improvements

Server Component Example

@Component({
  standalone: true,
  template: `
Data loaded on server
`
})
export class ServerOnlyComponent {}

Angular 21이 개선한 점:

• 하이드레이션 불일치 처리
• 비동기 데이터 일관성
• 디버깅 경험

Result → 더 신뢰할 수 있는 SSR 애플리케이션.

Provider Scopes

Global Provider

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()]
});

Component‑Level Provider

@Component({
  standalone: true,
  providers: [UserService]
})
export class UserComponent {}

스코어가 명확해지고 예상치 못한 동작이 줄어듭니다.

Build‑Time Checks

Angular는 이제 빌드 시점에 잘못된 템플릿 바인딩을 잡아냅니다:

{{ user.nonExistingProp }}

• 더 이상 조용히 발생하는 런타임 버그가 없습니다.

Compatibility and Migration

• 기존 RxJS 코드는 그대로 동작합니다.
• NgModules는 여전히 지원됩니다.
• Signals로의 점진적 마이그레이션이 가능하므로 모든 코드를 다시 작성할 필요가 없습니다.

New Angular Projects

Angular 21은 명확성과 확신을 강조합니다:

• Standalone‑first 아키텍처
• 상태 관리를 위한 Signals
• 선택적인 zoneless 성능
• 더 빠른 빌드
• 더 깔끔한 사고 모델

Angular는 이제 “무겁다”는 느낌이 사라지고—현대적이고, 반응적이며, 프로덕션 준비가 된 프레임워크가 되었습니다.