ng-content를 사용한 content projection이란 무엇인가요?

Question

Accepted Answer

**Content projection**은 컴포넌트가 **부모가 전달한 마크업**을 받아 렌더링하게 해줍니다 — ``를 통해 배치됩니다. 내부 콘텐츠를 소비자가 제어하는, 유연하고 재사용 가능한 래퍼 컴포넌트(카드, 다이얼로그, 레이아웃)를 만드는 방법입니다. (Vue/웹 컴포넌트의 슬롯, React의 `children`에 해당하는 Angular의 방식입니다.) ## 단일 슬롯 projection ```ts // card.component.ts @Component({ selector: "app-card", template: `

`, }) export class CardComponent {} ``` ```html

Title

Any content I want!

``` 카드는 스타일이 적용된 래퍼를 제공하고, 부모는 그 안에 무엇이 들어갈지 결정합니다. `@Input`을 통해 문자열을 전달하는 것보다 훨씬 유연합니다. ## select를 사용한 다중 슬롯 projection ```ts @Component({ selector: "app-panel", template: `

`, }) export class PanelComponent {} ``` ```html

My Panel

Main body content

``` `select` 속성(CSS 선택자 — 속성, 클래스, 또는 태그)은 프로젝션된 각 콘텐츠 조각을 올바른 `` 슬롯으로 라우팅하여, 다중 영역 레이아웃을 가능하게 합니다. ## 프로젝션된 콘텐츠는 원래의 컨텍스트를 유지한다 ```text 프로젝션된 콘텐츠는 부모의 컨텍스트에서 생성된다 — 그 바인딩, 메서드, 생명주기는 래퍼 컴포넌트가 아니라 부모에 속한다. ``` ## 왜 중요한가 Content projection은 Angular에서 **재사용 가능하고 조합 가능한** UI 컴포넌트를 만드는 열쇠입니다. 카드, 모달, 탭, 레이아웃, 그리고 소비자가 내부 콘텐츠를 공급하는 모든 "껍데기"입니다. 이것이 없으면 컴포넌트는 경직될 것입니다(입력으로만 구성 가능). ``(그리고 여러 슬롯을 위한 `select`)와 함께라면 유연한 컨테이너가 되며, 이는 디자인 시스템과 공유 컴포넌트 라이브러리에 필수적입니다.