[Angular] Pipe란? (feat. Built-in Pipe)

Pipe란?

 

Angular 공식 문서에는 아래와 같이 소개하고 있습니다.

 

 

직독하면 "클래스를 파이프로 표시하고 구성 메타데이터를 제공하는 데코레이터" 입니다.

 

그런데 이렇게 말하면 무슨 말인지 이해가 안되죠?

 

이해하기 쉽게 말씀 드리면 HTML에서 문자나 숫자를 원하는 것에 맞게 변형할 때 쓰는 것입니다.

 

아래는 Angular에서 built-in으로 제공되는 Pipe API List 인데요.

 

하나씩 살펴보도록 하겠습니다.

 

 

1. 문자 파이프

 

먼저 가장 쉬운 것부터 문자를 변형시키는 파이프입니다.

 

UpperCasePipe,LowerCasePipe, TitleCasePipe 등이 있는데 말 그대로 문자를 변형 시켜주는 것입니다.

 

사용하는 방법은 나타내고 싶은 문자를 '|' 것과 함께 파이프 이름을 적어주시면 됩니다.

 

우선 ts파일에 아래와 같이 name을 정해주시고 (오 티스토리에 TypeScript도 이제 지원되네)

 

 name: string = 'Fomagran';

 

HTML 태그에 적용해 주시면 됩니다.

 

<div>{{ name | uppercase }}</div>
<div>{{ name | lowercase }}</div>
<div>{{ name | titlecase }}</div>

 

그럼 아래와 같이 문자가 변형돼서 나타나게 됩니다.

 

 

2. 숫자 파이프

 

그 다음으론 숫자와 관련된 파이프를 보겠습니다.

 

먼저 소수점이 있는 숫자를 원하는 형식에 맞게 나타내고 싶다면 DecimalPipe를 이용하면 되는데요.

 

ts파일에 pi를 나타내는 숫자를 만들어주고

 

pi: number = 3.14159265359;

 

HTML 태그에 number 파이프를 적용해 줍니다.

 

<div>{{ pi | number }}</div>
<div>{{ pi | number: "1.4-5" }}</div>

 

그냥 number만 사용하였을 경우 default가 소수점 3자리까지 나타나고, 정수인 부분 x. 소수인 부분의 길이 n~m까지를 적용할 수 있습니다.

 

3. 기호 파이프

 

화폐의 단위를 뒤에 붙일 수도 있고 퍼센트를 표시할 수도 있는데요.

 

ts파일에 percent와 money를 만들어 줍니다.

 

  percent: number = 0.259;
  money: number = 0.35;

 

HTML 태그에 아래와 같이 적용해 줍니다.

 

<div>{{ percent | percent }}</div>
<div>{{ percent | percent: "2.3" }}</div>
<div>{{ money | currency }}</div>
<div>{{ money | currency: "KRW":"symbol":"1.2" }}</div>

 

위 DecimalPipe에서 사용한 정수 및 소수점을 나타내는 방법도 똑같이 적용할 수 있습니다.

 

4. 날짜 파이프

 

DatePipe를 이용해서 날짜 형식에 맞게 나타낼 수도 있습니다.

 

ts파일에 현재 date를 만들어 줍니다.

 

  date: number = Date.now();

 

HTML태그에 아래와 같이 적용해 줍니다.

 

<div>{{ date | date: "medium" }}</div>
<div>{{ date | date: "YYYY/MM/dd" }}</div>

 

Angular에서 이미 만들어 놓은 short, medium, long을 사용할 수도 있고

 

(여기 가시면 더 자세히 확인할 수 있습니다.)

 

 

원래 사용하던대로 YYYY/MM/dd와 같은 형식으로도 바꿀 수 있습니다.

 

 

5. 객체 파이프

 

ts파일에 object와 json객체를 나타내는 jsonObject를 만들어 줍니다.

 

  object: { [key: number]: string } = { 1: 'one', 2: 'two', 3: 'three' };
  jsonObject: Object = {
    foo: 'bar',
    baz: 'qux',
    nested: { xyz: 3, numbers: [1, 2, 3, 4, 5] },
  };

 

아래와 같이 HTML태그에 적용해 줍니다.

 

<div *ngFor="let item of object | keyvalue">
  {{ item.key }}. {{ item.value }}
</div>
<div>
  <pre>{{ jsonObject | json }}</pre>
</div>

 

아래와 같이 객체를 키,밸류 값에 맞게 원하는 형태로 나타낼 수도 있고, JSON 형식처럼 보이게 나타낼 수도 있습니다.

 

6. 배열 파이프

 

slice를 이용해서 배열을 잘라서 보여줄 수도 있습니다.

 

ts파일에 아래와 같이 배열을 만들어 주고,

 

array: number[] = [1, 2, 3, 4, 5, 6, 7];

 

HTML 태그에 slice를 적용해 줍니다.

 

<div>{{ array | slice: 0:4 }}</div>
<div>{{ array | slice: -2 }}</div>

 

아래와 같이 slice가 적용되는 것을 볼 수 있습니다.

 

 

7. 비동기 파이프

 

마지막으로 나중에 바뀌게 되는 비동기 파이프에 대해서 알아 보겠습니다.

 

ts파일에 1초에 한번씩 바뀌도록 하는 Observable을 만들어 줍니다.

 

time = new Observable<string>((observer: Observer<string>) => {
    setInterval(() => observer.next(new Date().toString()), 1000);
  });

 

HTML 태그에 async파이프를 적용해 줍니다.

 

<div>Time: {{ time | async }}</div>

 

아래와 같이 초에 따라 업데이트 되는 것을 볼 수 있습니다.

 

---

오늘은 이렇게 직접 코드를 구현하지 않고도 편리하게 HTML에서 원하는 형태로 변형하여 나타낼 수 있는 파이프에 대해 알아 보았습니다.

 

덕분에 이제 편하게 HTML에서 원하는 문자나 숫자를 표현할 수 있게 되었습니다.

 

제가 정리한 것 외에도 더 다양한 파이프들이 있으니 궁금하신 분들은 공식 Angular 홈페이지에서 확인하시면 됩니다.

 

혹시라도 틀린 점이 있거나 궁금하신 부분이 있다면 댓글로 알려주세요!

---

Reference

 

• https://angular.kr/api/core/Pipe