커스텀 파이프 만들기

데이터를 원하는 형식으로 직접 변환하려면 커스텀 파이프를 만들면 됩니다.

참고: 자세한 내용은 커스텀 파이프 만들기 심화 가이드 문서를 참고하세요.

이번 튜토리얼에서는 커스텀 파이프를 만들어서 템플릿에 적용해 봅시다.

파이프는 @Pipe 데코레이터가 붙은 TypeScript 클래스입니다. 예제 코드를 확인해 보세요:

      
import {Pipe, PipeTransform} from '@angular/core';@Pipe({  name: 'star',})export class StarPipe implements PipeTransform {  transform(value: string): string {    return `⭐️ ${value} ⭐️`;  }}
    

StarPipe는 문자열을 받아서 앞뒤로 별 이모지를 붙이는 파이프입니다. 이런 내용을 확인해 보세요:

• @Pipe 데코레이터에 지정한 name은 템플릿에 파이프를 사용할 때 활용되는 이름을 지정합니다.
• 파이프의 동작 로직은 transform 함수에 지정합니다.

좋습니다. ReversePipe를 직접 만들어 봅시다:

1. ReversePipe를 생성합니다

   reverse.pipe.ts 파일에 있는 ReversePipe 클래스에 @Pipe 데코레이터를 다음과 같이 지정해 보세요:

         
   @Pipe({    name: 'reverse'})
       

2. transform 함수를 구현해 보세요

   이제 ReversePipe 클래스는 파이프가 되었습니다. transform 함수를 수정해서 원하는 로직을 구현해 보세요:

         
   export class ReversePipe implements PipeTransform {    transform(value: string): string {        let reverse = '';        for (let i = value.length - 1; i >= 0; i--) {            reverse += value[i];        }        return reverse;    }}
       

3. 템플릿에 ReversePipe를 사용해 보세요

이제 파이프 로직이 완성되었기 때문에 템플릿에 적용하기만 하면 됩니다. app.ts 파일에 파이프를 등록하고 템플릿에도 적용해 보세요:

      
@Component({    ...    template: `Reverse Machine: {{ word | reverse }}`    imports: [ReversePipe]})
    

이제 다 완료되었습니다. 이번 예제도 훌륭하게 마무리하셨습니다. 이제 파이프를 사용하는 방법뿐 아니라, 커스텀 파이프를 구현하는 방법도 학습했습니다.