Angular 애플리케이션에서 파이프(pipes)는 데이터를 표시하는 방식을 변환하는데 사용됩니다. 파이프 구성은 데이터 변환 및 표시를 사용자 정의하는 강력한 방법을 제공합니다.

기본 파이프

Angular는 다양한 기본 파이프를 제공합니다. 예를 들어, date 파이프는 날짜를 특정 형식으로 표시할 수 있고, uppercase 파이프는 문자열을 대문자로 변환할 수 있습니다.

파이프 사용하기

파이프를 사용하려면 NgModule에서 CommonModule을 가져와야 합니다. 그런 다음 컴포넌트 템플릿에서 파이프를 사용할 수 있습니다.

예를 들어, 다음은 date 파이프를 사용하여 현재 날짜를 “yyyy-MM-dd” 형식으로 표시하는 방법입니다.

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ]
})
export class MyModule { }

컴포넌트 템플릿:

<p>Today's date is {{ today | date:'yyyy-MM-dd' }}</p>

커스텀 파이프 만들기

때로는 기본 파이프로는 원하는 결과를 얻을 수 없을 때가 있습니다. 이럴 때는 커스텀 파이프를 만들어 사용할 수 있습니다.

커스텀 파이프를 만들려면 Pipe 데코레이터를 사용하고 PipeTransform 인터페이스를 구현해야 합니다.

예를 들어, 다음은 숫자를 제곱하는 자체적인 커스텀 파이프를 만드는 방법입니다.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'square'})
export class SquarePipe implements PipeTransform {
  transform(value: number): number {
    return value * value;
  }
}

그런 다음, 이를 사용하여 컴포넌트 템플릿에서 숫자를 제곱할 수 있습니다.

<p>{{ 4 | square }}</p>

마치며

파이프는 Angular 애플리케이션에서 데이터 표시 방식을 쉽게 변환하고 사용자 정의하는데 매우 유용합니다. 기본 파이프를 사용하거나 커스텀 파이프를 만들어 여러분의 애플리케이션에 적합한 데이터 표시 방식을 만들어보세요.

더 많은 정보와 예제는 Angular 공식 문서를 참조하세요.