Angular의 View Encapsulation이란 무엇인가요?

Question

Accepted Answer

**View Encapsulation**은 컴포넌트의 CSS가 어떻게 한정되는지를 제어합니다. 기본적으로 Angular는 **각 컴포넌트의 스타일을 격리**하여, 다른 컴포넌트로 새어 나가거나 다른 컴포넌트의 영향을 받지 않게 합니다. 이는 CSS의 전역 스코프 문제를 해결합니다. ## 기본값: Emulated 캡슐화 ```ts @Component({ selector: "app-card", template: `

Title

`, styles: [`h2 { color: blue; }`], // 오직 이 컴포넌트의

에만 영향 // encapsulation: ViewEncapsulation.Emulated (기본값 — 지정할 필요 없음) }) export class CardComponent {} ``` 기본 `Emulated` 모드에서, 그 `h2 { color: blue }`는 다른 컴포넌트의 `

`에 영향을 주지 않으며, 외부 스타일도 이 컴포넌트로 스며들지 않습니다. ## Emulated가 내부적으로 동작하는 방식 ```html
Title
``` Angular는 컴포넌트의 요소에 고유한 `_ngcontent`/`_nghost` 속성을 자동으로 추가하고, 그 CSS 선택자를 이들에만 매칭되도록 재작성합니다. 네이티브 Shadow DOM 없이 한정된 스타일을 에뮬레이션합니다. ## 세 가지 모드 ```text ViewEncapsulation.Emulated (기본값) → 추가된 속성으로 한정 (모든 곳에서 동작) ViewEncapsulation.ShadowDom → 실제 브라우저 Shadow DOM (진정한 격리) ViewEncapsulation.None → 한정 없음 — 스타일이 전역 (모든 곳으로 새어 나감) ``` ## 필요할 때 캡슐화 뚫기 ```css /* 부모에서 자식 컴포넌트의 내부 스타일링 / :host { display: block; } / 컴포넌트 자신의 호스트 요소 / :host(.active) { ... } / 클래스를 가진 호스트 / ::ng-deep .child-class { color: red; } / 자식으로 뚫고 들어감 (신중히 사용 — 사실상 deprecated) */ ``` `:host`는 컴포넌트 자신의 루트 요소를 스타일링하고, `::ng-deep`은 스타일을 자손에게 강제로 통과시킵니다(강력하지만 권장되지 않음 — 캡슐화를 깨뜨림). ## 왜 중요한가 View Encapsulation은 Angular 컴포넌트가 격리된 상태로 스타일링하기에 안전한 이유입니다. 한 컴포넌트에서 `h2 { color: blue }`를 작성하면서 앱의 모든 `

`를 망가뜨릴까 걱정하지 않아도 됩니다. 기본 `Emulated` 모드(그리고 `None`/`ShadowDom` 대안, 의도적 예외를 위한 `:host`와 `::ng-deep`)를 이해하는 것은 대규모 앱에서 스타일을 관리하고, 스타일 누수가 심각한 문제가 될 컴포넌트 라이브러리를 만드는 데 중요합니다.