Angular Pipe

Pipe

이번 포스트에서는 Angular의 Pipe에 대해서 알아보겠습니다. Pipe는 HTML template내에서 출력하고자 하는 데이터를 원하는 형식으로 변환하여 출력하는 기능입니다. 원본 데이터에는 변형을 가하지 않은 상태로 출력 형태만 변경해 주기 때문에 원치않은 Side Effect를 없앨 수 있습니다.

가장 흔하게 사용하는 예부터 시작하여 사용자 정의 pipe를 생성하는 것 까지 살펴보겠습니다.

---

 Built-in Pipe

Angular는 몇가지 종류의 built-in pipe를 지원합니다. 자세한 사항은 여기를 클릭해 보시면 볼 수 있습니다. 이 중 몇가지만 예를 들어 보기로 하죠.

다음은 대문자로 출력내용을 바꾸는 pipe의 사용법입니다.

<h5 #resultStatus 
    class="mb-0 text-white lh-100">
    Search Result : {{searchTitle | uppercase }}
</h5>

searchTitle의 값이 그대로 interpolation을 이용해 출력되는 형태에서 uppercase라는 내장 pipe를 이용해 출력되는 영문문자열을 대문자로 변경해 출력하는 것입니다.

이와 유사하게 다음과 같이 날짜에 대한 pipe도 존재합니다.

<div>{{ today }}</div>
<div>{{ today | date }}</div>
<div>{{ today | date: 'y년 MM월 dd일' }}</div>

today = new Date();

원래 출력되는 형식과 pipe로 변형되서 출력되는 형식을 잘 보시면 될 듯 합니다. 또한 pipe사용은 체이닝을 지원합니다. 여러 pipe를 이어서 원하는 형식으로 변환시켜 출력 가능하다는 말이죠.

이번에는 우리예제 중 Material Table의 출력 중 가격부분을 통화단위로 바꾸어서 출력하는걸 해보도록 하죠.

다음은 list-box.component.html의 일부입니다.

<ng-container matColumnDef="bprice">
  <mat-header-cell *matHeaderCellDef> Price </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.bprice | currency: 'KRW'}} </mat-cell>
</ng-container>

위의 예에서 볼 수 있듯이 책의 가격을 통화단위(원화)로 변경해서 출력할 수 있습니다. 이렇게 built-in pipe를 이용해서 처리할 수 있고 built-in pipe로 처리할 수 없는 것들은 custom pipe를 이용해 처리할 수 있습니다.

사용자 정의 pipe를 이용해 비슷한 처리를 해 보겠습니다.

command 창을 열고 다음의 명령을 실행해 pipe를 생성합니다.

ng generate pipe bookPrice

book-price.pipe.ts 파일이 생성되게 됩니다. 기본적인 code가 생성되고 내용은 다음과 같이 수정합니다.

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

@Pipe({
  name: 'bookPrice'
})
export class BookPricePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + '원';
  }

}

bookPrice란 이름의 pipe를 사용하면 transform() method가 호출되서 변환작업을 진행하게 됩니다. 적절하게 해당 method의 내용을 우리가 원하는 내용으로 변경해주면 되겠네요. 위의 코드는 입력받은 숫자를 3자리마다 ,를 찍고 맨 마지막에 ‘원’을 붙여서 문자열을 리턴하는 코드입니다.

우리가 만든 pipe를 Module에 등록하고 list-box.component.html 에서 다음과 같이 사용하시면 됩니다.

<ng-container matColumnDef="bprice">
  <mat-header-cell *matHeaderCellDef> Price </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.bprice | bookPrice}} </mat-cell>
</ng-container>

이번 포스트에서는 Angular에서 Pipe라고 불리는 요소가 어떠한 역할을 하는지에 대해서 알아보았습니다. Pipe는 어렵지 않은 내용이기 때문에 built-in pipe를 사용하는 방법과 custom pipe를 작성하는 방법만 몇가지 알아두시면 됩니다.