ProgrammingFrontendAngular

[Angular] ViewEncapsulation: 다양한 모드 및 사용 방법 알아보기

, , ,

Angular는 개발자에게 ViewEncapsulation을 포함하여 컴포넌트를 빌드하고 스타일을 지정할 수 있는 여러 도구를 제공합니다.

이 글에서는 ViewEncapsulation이 무엇인지, ViewEncapsulation이 제공하는 다양한 모드와 각 모드를 언제 사용하는지 살펴보겠습니다.

ViewEncapsulation 이란

ViewEncapsulation은 컴포넌트의 스타일을 캡슐화하는 Angular 기능입니다. 즉, 원치 않는 스타일 충돌을 방지하기 위해 컴포넌트의 스타일을 애플리케이션의 다른 부분과 분리합니다. 또한 ViewEncapsulation을 사용하면 컴포넌트가 다른 컴포넌트에 영향을 주지 않는 자체 비공개 스타일을 가질 수 있습니다.

Angular는 Emulated, None 및 Shadow DOM의 세 가지 ViewEncapsulation 모드를 제공합니다. 각 모드를 자세히 살펴보고 각 모드를 언제 사용해야 하는지 알아보겠습니다.

Emulated

Emulated는 Angular의 기본 ViewEncapsulation 모드입니다. 이 모드에서 Angular는 컴포넌트의 스타일 범위를 해당 요소에만 적용하기 위해 컴포넌트의 HTML 요소에 고유한 속성을 추가합니다.

예는 다음과 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
@Component({
  selector: 'app-example',
  template: ` <h1>Hello World!</h1> `,
  styles: [
    `
      h1 {
        color: red;
      }
    `,
  ],
})
export class ExampleComponent {}

Emulated 모드에서 Angular는 위 컴포넌트의 HTML과 CSS를 다음과 같이 변환합니다.

1
2
3
<app-example _ngcontent-abc>
  <h1 _ngcontent-abc>Hello World!</h1>
</app-example>
1
2
3
h1[_ngcontent-abc] {
  color: red;
}

h1 요소의 스타일 범위를 해당 컴포넌트로만 지정하는 _ngcontent-abc 속성이 추가되었습니다.

컴포넌트의 스타일을 캡슐화하고 원치 않는 스타일 충돌을 방지하려면 Emulated 모드를 사용하십시오.

None

None은 캡슐화를 완전히 제거하는 Angular의 또 다른 ViewEncapsulation 모드입니다. 이 모드에서 Angular는 컴포넌트의 HTML 요소에 속성을 추가하지 않으므로 스타일이 컴포넌트 밖으로 누출되어 애플리케이션의 다른 부분에 영향을 미칠 수 있습니다.

예는 다음과 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
@Component({
  selector: 'app-example',
  template: ` <h1>Hello World!</h1> `,
  styles: [
    `
      h1 {
        color: red;
      }
    `,
  ],
  encapsulation: ViewEncapsulation.None,
})
export class ExampleComponent {}

None 모드에서 Angular는 컴포넌트의 HTML과 CSS를 어떤 방식으로든 변환하지 않습니다.

전역 스타일을 적용해야 하거나 다른 컴포넌트의 스타일을 재정의하려는 경우 None 모드를 사용하세요.

Shadow DOM

Shadow DOM은 Angular의 최종 ViewEncapsulation 모드입니다. 이 모드에서 Angular는 브라우저의 기본 Shadow DOM을 사용하여 컴포넌트의 스타일을 캡슐화합니다. Shadow DOM은 컴포넌트의 HTML 및 CSS에 대해 별도의 DOM 트리를 생성하여 컴포넌트의 스타일을 애플리케이션의 다른 부분과 격리합니다.

예는 다음과 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
@Component({
  selector: 'app-example',
  template: ` <h1>Hello World!</h1> `,
  styles: [
    `
      h1 {
        color: red;
      }
    `,
  ],
  encapsulation: ViewEncapsulation.ShadowDom,
})
export class ExampleComponent {}

Shadow DOM 모드에서 Angular는 브라우저의 기본 Shadow DOM을 사용하여 컴포넌트의 HTML 및 CSS에 대한 별도의 DOM 트리를 생성합니다.

최고 수준의 캡슐화를 원하고 컴포넌트 스타일이 애플리케이션의 나머지 부분에 영향을 받는 것을 원하지 않을 때 Shadow DOM 모드를 사용하세요.

결론

Angular의 ViewEncapsulation을 이해하면 재사용 및 유지 관리가 가능한 컴포넌트를 만드는 능력이 크게 향상될 수 있습니다. ViewEncapsulation을 적절하게 사용하면 컴포넌트 간의 스타일 및 레이아웃 충돌을 방지하고 일관된 사용자 인터페이스를 유지할 수 있습니다.

Emulated, Native 또는 None ViewEncapsulation 중 무엇을 사용하든 각 옵션과 관련된 장단점을 염두에 두고 프로젝트 요구 사항에 가장 적합한 옵션을 선택하는 것이 중요합니다.

전반적으로 ViewEncapsulation은 간과해서는 안 되는 Angular 개발의 중요한 측면입니다. 모범 사례를 따르고 정보에 입각한 결정을 내리면 확장 가능하고 유지 관리 가능한 고품질 Angular 애플리케이션을 만들 수 있습니다.

Share