Angular를 쓰다 보면 템플릿 안에서 데이터를 변형해서 보여줘야 하는 경우가 많습니다.
이때 아주 유용하게 쓰이는 것이 Pipe입니다.
Pipe란?
Pipe는 데이터를 템플릿에서 변환(transform)하기 위해 사용하는 기능입니다.
예를 들어, 날짜 포맷 변경, 소문자/대문자 변환, 통화 형식 지정 등 다양한 작업을 손쉽게 할 수 있습니다.
Angular 기본 제공 파이프 종류
Angular에서는 여러 가지 내장 파이프를 제공하며, 주요 파이프는 다음과 같습니다
| 파이프 이름 | 설명 |
| date | 날짜 포맷 변경 |
| uppercase | 문자열을 대문자로 변환 |
| lowercase | 문자열을 소문자로 변환 |
| titlecase | 각 단어의 첫 글자를 대문자로 |
| currency | 통화 형식으로 변환 |
| percent | 퍼센트(%)로 변환 |
| number | 숫자 포맷 지정 |
| json | 객체를 JSON 문자열로 변환 |
| slice | 배열/문자열의 일부를 추출 |
| async | Observable 또는 Promise의 결과값 구독 |
| i18nSelect | 다국어 문자열 중 조건에 맞는 것 선택 |
| i18nPlural | 숫자에 따라 다른 문자열 반환 |
1. date – 날짜 포맷 변환
today = new Date();
<html>
<p>{{ today | date:'fullDate' }}</p> <!-- Thursday, July 25, 2025 -->
<p>{{ today | date:'yyyy-MM-dd HH:mm' }}</p> <!-- 2025-07-25 14:30 -->
2. uppercase – 문자열을 대문자로
<p>{{ 'hello angular' | uppercase }}</p> <!-- HELLO ANGULAR -->
3. lowercase – 문자열을 소문자로
<p>{{ 'HELLO ANGULAR' | lowercase }}</p> <!-- hello angular -->
4. titlecase – 각 단어의 첫 글자만 대문자로
<p>{{ 'angular is awesome' | titlecase }}</p> <!-- Angular Is Awesome -->
5. currency – 통화 형식
<p>{{ 123456 | currency:'KRW':'symbol':'1.0-0' }}</p> <!-- ₩123,456 -->
<p>{{ 123456 | currency:'USD':'symbol-narrow':'1.2-2' }}</p> <!-- $123,456.00 -->
6. percent – 백분율 표현
<p>{{ 0.853 | percent }}</p> <!-- 85% -->
<p>{{ 0.853 | percent:'1.1-2' }}</p> <!-- 85.3% -->
7. number – 숫자 형식 포맷
<p>{{ 1234567.89 | number }}</p> <!-- 1,234,567.89 -->
<p>{{ 1234567.89 | number:'1.0-0' }}</p> <!-- 1,234,568 -->
8. json – 객체를 JSON 문자열로 변환
user = { name: 'Jimin', age: 28 };
<html>
<pre>{{ user | json }}</pre>
<!--
{
"name": "Jimin",
"age": 28
}
-->
9. slice – 배열 혹은 문자열 자르기
fruits = ['Apple', 'Banana', 'Cherry', 'Date'];
text = 'Angular';
<html>
<p>{{ fruits | slice:1:3 }}</p> <!-- Banana,Cherry -->
<p>{{ text | slice:1:4 }}</p> <!-- ngu -->
10. async – Observable 또는 Promise 결과 처리
message$ = of('Hello from Observable');
promiseMsg = Promise.resolve('Hello from Promise');
<html>
<p>{{ message$ | async }}</p> <!-- Hello from Observable -->
<p>{{ promiseMsg | async }}</p> <!-- Hello from Promise -->
11. i18nSelect – 선택형 텍스트 처리
genderMap = {
male: '그는',
female: '그녀는',
other: '그들은',
};
person = 'female';
<html>
<p>{{ person | i18nSelect:genderMap }} 개발자입니다.</p> <!-- 그녀는 개발자입니다. -->
12. i18nPlural – 숫자에 따른 문구 처리
messages = {
'=0': '메시지가 없습니다.',
'=1': '메시지 1개',
'other': '메시지 #개',
};
msgCount = 3;
<html>
<p>{{ msgCount | i18nPlural:messages }}</p> <!-- 메시지 3개 -->
파이프 체이닝 (Chaining)
파이프는 여러 개를 동시에 연결해서 쓸 수 있습니다.
<p>{{ today | date:'shortDate' | uppercase }}</p>
성능 주의
파이프는 변환 시 연산을 하기 때문에 복잡한 계산이 들어간 커스텀 파이프나 비동기 파이프를 과도하게 쓰면 성능 저하가 생길 수 있습니다.
특히 async 파이프를 무분별하게 쓰기보다는, *ngIf="data$ | async as data" 형태로 캐싱해두고 사용하는 것이 좋습니다.
Angular에서는 @Pipe 데코레이터로 자신만의 파이프를 만들 수도 있습니다. 다음 포스팅에서 계속..
'개발 공부 > Angular' 카테고리의 다른 글
| Angular에서 signal을 써야 하는 이유 (1) | 2025.08.15 |
|---|---|
| Angular의 내장 파이프(Built-in Pipes) (2) - Custom (1) | 2025.07.27 |
| Angular 20 - *ngIf, *ngFor, *ngSwitch Deprecation (0) | 2025.07.18 |
| Angular Subject, BehaviorSubject (0) | 2025.07.05 |
| Angular 동적 라우팅 vs 쿼리 파라미터 (0) | 2025.06.01 |