[Angular] Pipe 소개 및 사용방법

Angular 파이프(Pipe)는 Angular 애플리케이션의 필수 부분으로, 데이터를 변환하고 형식을 지정하는 간단한 방법을 제공합니다. 파이프를 사용하면 필요에 맞게 데이터를 쉽게 조작하고 이해하기 쉬운 형식으로 표시할 수 있습니다. 이 글에서는 AsyncPipe, CurrentPipe, DatePipe, DecimalPipe, I18nPluralPipe, I18nSelectPipe, JsonPipe, KeyValuePipe, LowerCasePipe, PercentPipe, SlicePipe, TitleCasePipe 및 UpperCasePipe를 포함한 다양한 유형의 Angular 파이프를 살펴보겠습니다. 또한 Angular 파이프를 효과적으로 사용하기 위한 모범 사례에 대해서도 알아보겠습니다.

AsyncPipe

AsyncPipe는 Angular에서 비동기 데이터를 처리하는 데 사용됩니다. 이를 통해 HTTP 요청 또는 Promise와 같은 비동기 작업에서 반환된 데이터를 표시할 수 있습니다. AsyncPipe는 Observable 또는 Promise를 구독(subscribe)하고 데이터가 변경되면 자동으로 뷰를 업데이트합니다. 다음은 AsyncPipe를 사용하여 비동기 데이터를 처리하는 예입니다.

<p>{{ (data$ | async)?.name }}</p>

CurrencyPipe

CurrencyPipe는 Angular에서 통화(currency) 값의 형식을 지정하는 데 사용됩니다. 통화 기호, 천 단위 및 소수 구분 기호를 사용하여 특정 통화 형식으로 숫자를 표시할 수 있습니다. 다음은 통화 값 형식을 지정하기 위해 CurrencyPipe를 사용하는 예입니다.

<p>{{ 10000 | currency:'USD':'symbol':'1.2-2' }}</p>
<!-- Output: '$10,000.00' -->

DatePipe

DatePipe는 Angular에서 날짜 형식을 지정하는 데 사용됩니다. 'short', 'medium', 'long' 등 특정 형식으로 날짜를 표시할 수 있습니다. 커스텀(custom) 날짜 형식을 지정할 수도 있습니다. 다음은 DatePipe를 사용하여 날짜 형식을 지정하는 예입니다.

<p>{{ today | date:'shortDate' }}</p>
<!-- Output: '11/1/23' -->

DecimalPipe

DecimalPipe는 Angular에서 십진수 값의 형식을 지정하는 데 사용됩니다. 소수 구분 기호와 천 단위 구분 기호를 사용하여 특정 소수 형식으로 숫자를 표시할 수 있습니다. 다음은 DecimalPipe를 사용하여 10진수 값의 형식을 지정하는 예입니다.

<p>{{ 1000.5 | number:'1.2-2' }}</p>
<!-- Output: '1,000.50' -->

I18nPluralPipe

I18nPluralPipe는 Angular에서 복수형을 처리하는 데 사용됩니다. 항목 수에 따라 다른 텍스트를 표시할 수 있습니다. 다음은 I18nPluralPipe를 사용하여 복수화를 처리하는 예입니다.

items = ['Message 1'];

<p>{{ items.length }} / {{ items.length | i18nPlural : { '=0': 'No items', '=1': '1 item', other: '# items' } }}</p>
<!-- Output: '1 / 1 item' -->

I18nSelectPipe

I18nSelectPipe는 Angular에서 select 문을 처리하는 데 사용됩니다. 조건에 따라 다른 텍스트를 표시할 수 있습니다. 다음은 I18nSelectPipe를 사용하여 select 문을 처리하는 예입니다.

<p>{{ gender | select: { 'male': 'He', 'female': 'She', 'other': 'They' } }}</p>

JsonPipe

JsonPipe는 Angular에서 JSON 데이터를 표시하는 데 사용됩니다. JSON 데이터를 읽을 수 있는 형식으로 표시할 수 있습니다. 다음은 JsonPipe를 사용하여 JSON 데이터를 표시하는 예입니다.

<p>{{ data | json }}</p>

LowerCasePipe

LowerCasePipe는 문자열을 소문자로 변환하는 데 사용됩니다.

{{ 'HELLO WORLD' | lowercase }}
<!-- Output: hello world -->

PercentPipe

PercentPipe는 숫자를 백분율로 형식화하는 데 사용됩니다.

{{ 0.25 | percent }}
<!-- Output: 25% -->

SlicePipe

SlicePipe는 배열 또는 문자열의 조각을 추출하는 데 사용됩니다.

{{ 'abcdefghijk' | slice:0:5 }}
<!-- Output: abcde -->

TitleCasePipe

TitleCasePipe는 문자열을 title 케이스로 변환하는 데 사용됩니다(각 단어의 첫 글자를 대문자로 표시).

{{ 'hello world' | titlecase }}
<!-- Output: Hello World -->

UpperCasePipe

UpperCasePipe는 문자열을 대문자로 변환하는 데 사용됩니다.

{{ 'hello world' | uppercase }}
<!-- Output: HELLO WORLD -->

결론

이 글에서는 다양한 Angular 파이프와 그 기능을 살펴보았습니다. 파이프는 애플리케이션에서 데이터를 쉽게 변환하고 형식을 지정할 수 있게 해주는 Angular의 중요한 기능입니다. 이러한 파이프를 이해하고 활용함으로써 Angular 애플리케이션을 보다 효율적이고 동적이고 사용자 친화적으로 만들 수 있습니다. 특정 사용 사례에 적합한 파이프를 사용하고 파이프를 철저히 테스트하는 것을 잊지 마세요. 이 글을 통해 Angular 파이프에 대한 더 나은 이해와 응용 프로그램에서 이를 효과적으로 사용하는 방법을 얻을 수 있기를 바랍니다.