Angular Material 20: Material Design 3 기능, 성능 최적화 및 주요 변경 사항 분석

Angular Material 20: 주요 업데이트 분석

Angular Material 20은 라이브러리에 새로운 기능, 향상된 접근성, 성능 최적화 및 코드베이스 현대화를 위한 주요 변경 사항을 도입하여 상당한 발전을 이루었습니다. 이번 릴리스는 더 나은 사용자 경험, 개선된 테마 기능, 간소화된 API에 중점을 둡니다.

주요 기능 및 개선 사항

• 머티리얼 디자인 3(MD3) 지원 확장:
  • 토널 버튼 (Tonal Buttons): 채워진 버튼과 윤곽선 버튼의 중간 지점을 제공하는 새로운 MD3 변형이 도입되었습니다. 버튼의 appearance 속성을 tonal로 설정하여 사용할 수 있습니다.
  • 채워진 카드 (Filled Cards): 카드 컴포넌트가 appearance='filled' 속성을 지원하여 시각적 계층 구조와 표면 구분을 개선했습니다.
• 향상된 다이얼로그 제어:
  • closePredicate 옵션이 추가되어 다이얼로그가 언제 닫힐 수 있는지 세밀하게 제어할 수 있게 되었습니다. 특정 조건(예: 입력 값이 'dog'일 경우)에 따라 다이얼로그 닫힘을 허용하거나 차단할 수 있습니다.
• CDK Drag-and-Drop 개선:
  • resetToBoundary() 메서드가 CDK 드래그 앤 드롭 모듈에 추가되어 경계 관리를 개선했습니다. 이는 경계 요소의 크기가 동적으로 변경될 때 드래그 요소를 경계 내에 유지하는 데 유용합니다.
• 자동 완성 (Autocomplete) 개선:
  • 오버레이 백드롭을 지원하여 포커스 관리를 개선했습니다. MAT_AUTOCOMPLETE_DEFAULT_OPTIONS 토큰을 통해 hasBackdrop: true 속성을 제공할 수 있습니다.
• 접근성 및 성능 최적화:
  • prefers-reduced-motion 미디어 쿼리를 자동으로 존중하여 시스템 수준의 모션 설정을 따릅니다.
  • 폼 필드가 외부에서 설정된 aria-describedby 속성을 더 잘 보존합니다.
  • 폼 필드에서 최적화된 DOM 접근 패턴 및 ResizeObserver를 사용하여 성능을 향상시켰습니다.
  • 오버레이 시스템은 번들 최적화를 위한 트리 쉐이커블 대안을 제공합니다.
• 컴포넌트별 개선 사항:
  • 칩 입력(Chip inputs)이 플레이스홀더 및 disabledInteractive 속성을 올바르게 처리합니다.
  • 슬라이더 컴포넌트가 null 값을 올바르게 처리하고 토큰 관리를 개선했습니다.
  • 탭(Tabs) 컴포넌트가 제로 애니메이션 지속 시간을 올바르게 처리하여 깜박임 문제를 방지합니다.

주요 변경 사항 및 마이그레이션

Angular Material 20에는 마이그레이션이 필요한 주요 변경 사항이 포함되어 있습니다. 라이브러리는 토큰 이름 변경 및 기타 업데이트를 지원하는 스키매틱을 제공합니다:

• ng update @angular/material
• ng generate @angular/material:token-rename

스키매틱의 역할:

1. --mdc-로 시작하는 CSS 변수를 --mat-으로 변경합니다.
2. --mat-circular-progress를 --mat-progress-spinner로, --mat-tonal-button-을 --mat-button-tonal과 같이 컴포넌트 이름을 먼저 오도록 토큰 이름을 변경합니다.

개발 임팩트

Angular Material 20은 Material Design 3 기능, 향상된 접근성, 개선된 성능 및 현대화된 API를 제공함으로써 라이브러리 발전에 중요한 단계를 나타냅니다. 토널 버튼, 채워진 카드, 개선된 다이얼로그 및 성능 최적화는 Angular 애플리케이션에 매력적인 업그레이드를 제공합니다. 주요 변경 사항은 마이그레이션 노력을 필요로 하지만 API 표면을 간소화하고 사용 중단된 패턴을 제거하는 데 도움이 됩니다.