[Angular] 재사용 가능한 컴포넌트(Component)

웹 애플리케이션 구축에 Angular를 사용하는 주요 이점 중 하나는 재사용 가능한 컴포넌트를 생성할 수 있다는 것입니다.

이 글에서는 컴포넌트 구조, 입력 및 출력 속성, 콘텐츠 프로젝션을 포함하여 Angular를 사용하여 재사용 가능한 컴포넌트를 구축하기 위한 사례를 살펴보겠습니다.

1. Component Structure

Angular에서 재사용 가능한 컴포넌트를 만들려면 다양한 상황에서 쉽게 사용할 수 있는 방식으로 컴포넌트를 구성하는 것이 중요합니다. 컴포넌트에는 입력 및 출력 속성이 잘 정의된 명확한 API가 있어야 하며 다양한 사용 사례를 처리할 수 있을 만큼 유연해야 합니다.

다음은 항목 목록을 표시하는 재사용 가능한 간단한 컴포넌트의 예입니다.

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-item-list',
  template: `
    <ul>
      <li *ngFor="let item of items">{{ item }}</li>
    </ul>
  `,
})
export class ItemListComponent {
  @Input() items: string[];
}

이 예에서 ItemListComponent 에는 문자열 배열인 항목이라는 Single Input 속성이 있습니다. 컴포넌트는 *ngFor 지시문을 사용하여 items 배열을 반복하고 목록의 각 항목을 표시합니다.

2. Input and Output Properties

입력 및 출력 속성은 Angular에서 재사용 가능한 컴포넌트를 만드는 데 중요한 부분입니다. Input 속성을 사용하면 상위 컴포넌트에서 데이터를 컴포넌트로 전달할 수 있고, Output 속성을 사용하면 컴포넌트에서 상위 컴포넌트로 이벤트를 내보낼 수 있습니다.

다음은 사용자가 목록에서 값을 선택할 수 있도록 하는 재사용 가능한 컴포넌트의 예입니다.

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-select',
  template: `
    <select [ngModel]="selectedValue" (ngModelChange)="selectValue.emit($event)">
      <option *ngFor="let option of options" [value]="option">{{ option }}</option>
    </select>
  `,
})
export class SelectComponent {
  @Input() options: string[];
  @Input() selectedValue: string;
  @Output() selectValue = new EventEmitter<string>();
}

이 예에서 SelectComponent 에는 두 개의 입력 속성인 options 와 selectedValue 와 하나의 출력 속성인 selectValue 가 있습니다. 컴포넌트는 ngModel 지시문을 사용하여 선택한 값을 selectedValue 속성에 바인딩하고 사용자가 목록에서 새 값을 선택할 때 selectValue 이벤트를 발생시킵니다.

3. Content Projection

콘텐츠 프로젝션은 Angular에서 재사용 가능한 컴포넌트를 구축하는 또 다른 주요 기능입니다. 콘텐츠 프로젝션을 통해 컴포넌트는 상위 항목의 임의 콘텐츠를 허용할 수 있으며, 이는 컴포넌트의 모양이나 동작을 사용자 지정하는 데 사용할 수 있습니다.

콘텐츠 프로젝션의 예는 다음과 같습니다.

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-section',
  template: `
    <div class="section">
      <h2>{{ title }}</h2>
      <ng-content></ng-content>
    </div>
  `,
  styles: [
    `
      .section {
        border: 1px solid black;
        padding: 10px;
        margin-bottom: 20px;
      }
      h2 {
        margin-bottom: 10px;
      }
    `,
  ],
})
export class SectionComponent {
  @Input() title: string;
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-section title="Section 1">
      <p>Content for section 1 goes here.</p>
    </app-section>
    <app-section title="Section 2">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </app-section>
  `,
})
export class ParentComponent {}

title 이 상위 컴포넌트에서 전달될 수 있도록 title 속성에 @Input 데코레이터를 추가했습니다. SectionComponent 템플릿은 보간을 사용하여 제목을 표시하고 ng-content 지시문은 상위 컴포넌트의 임의 콘텐츠를 투영하는 데 사용됩니다.

각 SectionComponent 인스턴스에 대한 입력으로 제목을 전달하고 있으며, 각 섹션의 콘텐츠는 ng-content 지시어를 사용하여 상위 컴포넌트에서 투영됩니다.

결론

이 글에서는 컴포넌트 구조, 입력 및 출력 속성, 콘텐츠 프로젝션을 포함하여 Angular를 사용하여 재사용 가능한 컴포넌트를 구축하기 위한 사례를 살펴보았습니다.

또한 이러한 기능을 사용하여 다양한 상황에서 사용할 수 있는 간단한 재사용 가능한 컴포넌트를 만드는 방법에 대한 몇 가지 예도 살펴보았습니다. 이러한 사례를 따르면 사용 및 유지 관리가 쉽고 Angular 애플리케이션의 전반적인 품질을 향상하는 데 도움이 되는 컴포넌트를 만들 수 있습니다.

Angular에서 재사용 가능한 컴포넌트를 사용하는 주요 이점 중 하나는 코드 중복을 줄이고 코드 유지 관리성을 높이는 기능입니다. 잘 설계되고 잘 문서화된 컴포넌트 세트를 만들면 다른 개발자가 우리 애플리케이션에서 더 쉽게 작업할 수 있을 뿐만 아니라 시간이 지남에 따라 코드를 더 쉽게 유지 관리하고 업데이트할 수도 있습니다.

전반적으로 Angular를 사용하여 재사용 가능한 컴포넌트를 구축하는 것은 웹 애플리케이션의 품질과 유지 관리성을 향상시키는 강력한 기술입니다. 이러한 사례를 따르고 다양한 컴포넌트 디자인을 실험함으로써 다양한 웹 애플리케이션을 구축하는 데 사용할 수 있는 강력하고 유연한 컴포넌트 세트를 만들 수 있습니다.