Angular 내장 파이프

Pipe의 역할

Angular 파이프는 문자열을 입력으로 받아들여 읽기 쉬운 출력을 만들어 내는 기능 입니다. 즉, 입력 된 값에 대해 원하는 포맷으로 출력을 해주거나 필터 역할을 합니다. 파이프는 다음과 같은 형태로 정의 합니다.

{{ 값 | 파이프 }}

예를 들어, 파이프를 이용해 UTC 시간인 14608040465805를 읽기 쉬운 형태로 변환해 보겠습니다.

UTC 시간 정보는 날짜 파이프를 이용하면 읽기 쉬운 날짜 형태로 변환 할 수 있습니다. UTC 시간 정보에 date 파이프를 적용해보겠습니다.

{{ 14608040465805 | date }} => Jul 9, 2016

UTC 시간 정보에 date Pipe를 추가했을 뿐인데 가독성 좋은 날짜 정보가 만들어졌습니다.

Pipe의 장점

• 가독성 향상: 적절한 파이프 사용은 데이터를 읽기 쉽게 만들어 가독성을 향상시킵니다.
• 코드 생산성 증가: 데이터 형식을 결정하기 위해 컴포넌트 마다 로직을 추가하지 않아도 됩니다. (코드 경량화)
• 유지보수 용이: 파이프를 사용하면 데이터 출력에 일관성이 생기고 유지보수가 쉬워집니다.

AngularJS 필터와 Angular 파이프 비교

AngularJS 필터 정의 방법

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

Angular 파이프 정의 방법

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

사실 위에 보이는거처럼 Angular의 파이프는 AngularJS 필터가 용어가 바뀐겁니다.

하지만 기능 면에서는 약간의 차이가 있습니다.

기능 요소	AngularJS  지원 여부	Angular 지원 여부
currency, date, uppercase, json, lowercase	O	O
number, limitTo, filter, orderBy	O	X
async, decimal, percent	X	O

보시는 것처럼 약간의 차이가 있는데 Angular 에서는 number, limitTo, filter, orderBy 를 지원 하지 않습니다.

그러나 이름은 같지 않지만 동일한 기능의 대체 파이프를 제공합니다.

예를 들면 AngularJS의 number 필터를 Angular의 decimal파이프와 percent파이프로 세분화됐습니다.

없어진 필터 기능을 이용하려면 커스텀 파이프를 추가해서 대체 할 수도 있습니다.

Angular 내장 파이프

1. 날짜 파이프

{{ 시간 정보 | date }}

예시를 보여 드리겠습니다.

     1.1. 날짜 파이프 심볼

날짜 형식을 사용자가 지정하기 위해 날짜 파이프에 형식을 더합니다.

{{ 시간 정보 | date:'형식' }}

이름	숫자 표현	2자리 표현
연도	y(2016)	yy(16)
월	M(01)	MM(01)
일	d(31)	dd(31)
시간	j / h / H (13, 1PM, 13)	jj / hh / HH(13, 01PM, 13)
분	m(1)	mm(01)
초	s(1)	ss(01)

예시를 보여 드리겠습니다.

2. 대소문자 파이프

대소문자 파이프는 문자열 변형 파이프입니다. 소문자를 모두 대문자로, 대문자를 모두 소문자로 변경하는 파이프 입니다.

 예제를 보겠습니다.

3. 통화 파이프

  통화 파이프는 입력으로 들어온 숫자에 대해 통화 코드 기준으로 바꾸서 보여줍니다. 여기서 통화 코드는 ISO 4217 기준으로 합니다.

  파이프를 사용하는 형식은 다음과 같습니다.

  {{ 표현식 | currency : '통화 코드': 심볼 변환 여부: 숫자 형식}}

  예를 확인해보겠습니다.

4. 퍼센트 파이프

  퍼센트 파이프의 사용법은 방금 살펴본 통화 파이프의 사용법 과 크게 다르지 않습니다.

  

  {{ 표현식 | percent : 출력 방식 }}

  퍼센트 파이프는 다음과 같이 동작 합니다.

이외에도 다양한 Angular 내장파이프를 이용 하여 코드를 경량화 시키고 효율성을 높일 수 있습니다.

- by seung