[Angular] 파이프- Pipes

문자열, 통화, 일자와 같은 데이터를 원하는 형태로 바꾸기 위하여 파이프를 사용한다.

Angula는 기본 파이프를 제공하며 이외에 데이터를 변환하는 로직이 별도로 필요하면 커스텀 파이프를 만들어서 사용할 수 있다.

 

 

 

템플릿에 파이프 사용하기

1. 문자열 바인딩 문법({{}}) 안에 작성한다.

2. 표현식의 오른쪽에 파이프(|)를 적고 파이프 이름을 적는다.

<!-- AsyncPipe 사용 예 -->
<span>Wait for it... {{ greeting | async }}</span>

 

파라미터와 체이닝 파이프로 데이터를 변경하기

파라미터 사용

파이프의 결과물을 조정하기 위해 추가적인 파라미터를 사용할 수 있다. 추가적인 파라미터를 사용하기 위해서는 콜론(:)을 붙여서 전달할 값을 작성하면 된다.

 

아래 예제는 CurrencyPipe 를 사용하는 예이다.

CurrencyPipe

  - locale 구성을 결정하는 locale 규칙에 따라 숫자를 통화 문자열로 변환하는 파이프

  - {{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}

**locale: 사용자의 언어, 국가뿐 아니라 사용자 인터페이스에서 사용자가 선호하는 사항을 지정하는 매개 변수의 모임 

{{ amount | currency:'EUR' }}

• 위와 같이 작성하면 amount에 있는 숫자가 유로 단위로 표시된다.

 

2개 이상의 파라미터를 전달할 때에는 콜론(:)을 이어 붙이면 된다.

{{ amount | currency:'EUR':'Euros '}}

 

파라미터를 반드시 지정해야 하는 경우가 있다. 한 예로는 Angular에서 기본적으로 제공하는 SlicePipe가 있다.

{{ slice:1:5 }}

파이프 체이닝

하나를 통과한 결과를 다른 파이프로 전달하는 방식으로 체이닝이 가능하다.

{{ birthday | date | uppercase}}

 

커스텀 파이프 만들기

클래스에 @Pipe 데코레이터를 지정하고 필요한 내용을 메타데이터에 작성하면 클래스를 파이프로 만들 수 있다.

• 파이프 클래스 이름은 일반적인 스타일로 UpperCamelCase로 작성한다.
• 메타데이터 name에 해당하는 문자열은 camelCalse로 작성한다. (name에 하이픈을 사용하지 말 것)

새롭게 만들 파이프는 NgModule 메타데이터의 declarations 필드에 등록해야 한다.

 

파이프에 바인딩된 데이터 변화 감지

변화를 감지하는 방식

파이프가 변화를 감지하는 방식을 알기 전에 어떤 때에 Angular 변화 감지가 일어나는지 확인해보자.

Angular 변화감지

• 키입력 등의 event, 타이머, 서버 응답과 같은 DOM 이벤트가 발생할 때마다 변화 감지 동작을 실행하고, 바인딩된 데이터가 변경되었는지 검사함

Angular의 변화감지 때마다 파이프가 계속 실행되면 앱 성능을 저하할 수 있다. 따라서 Angular의 변화감지와는 조금 다른 변화 감지를 사용한다.

 

변경 탐지

순수한(pure) 파이프

파이프가 변경을 탐지하는 기본 옵션은 pure이다.

pure인 경우에 탐지하는 변경은 아래와 같다.

• 기본 자료형의 값의 변경
• 객체 참조 변경

순수한(pure) 파이프는 순수함수로 구현해야 한다. 순수한 파이프를 사용하면 Angular는 객체 안에서 발생한 변화를 무시한다. 이로 인해 순수한 파이프에 배열을 인자로 전달하면 예상한대로 파이프가 실행되지 않는다.

이유: Angular change detector가 배열의 항목이 변경된 것을 감지하지 않아 파이프도 실행되지 않음 

해결: 배열을 참조하는 객체를 바꾸기

 

위의 해결방식으로 풀고 싶지 않다면, 객체안에 변경된 내용을 감지하기 위해서는 impure 를 선언하여 파이프를 사용해야 한다.

 

순수하지 않은(impure) 파이프

순수하지 않은 파이프는 Angular 변화 감지가 동작하는 시점마다 실행된다. 순수하지 않은 파이프를 정의하려면 pure 플래그에 false 값을 지정하면 된다.

@Pipe({
  name: 'flyingHeroesImpure',
  pure: false
})

순수하지 않은 파이프 안에서 무거운 로직을 실행하면 앱 성능이 급격하게 저하될 수 있다.

 

옵저버블에서 데이터 추출하기

Angular가 제공하는 AsyncPipe를 사용해서 파이프 인자를 옵저버블로 지정할 수 있다.

특징

• 옵저버블을 자동으로 구독하고 데이터를 추출하여 파이프 로직을 실행함
• 추출한 데이터를 템플릿에 바인딩함
• 옵저버블이 종료되었을 때 메모리 누수를 방지하기 위해 옵저버블 구독을 해지함

위 특징들로 AsyncPipe를 사용해서 옵저버블을 편리하게 다룰 수 있다.

 

AsyncPipe는 옵저버블 객체를 처리할 수 있도록 순수하지 않은 파이프로 구현되었다.

 

HTTP 요청 캐싱하기

Angular에서 서버통신에 사용하는 HttpClient 서비스가 제공하는 HttpClient.get() 과 같은 함수는 서버로부터 받은 데이터를 옵저버블 형태로 반환한다.

따라서 앞서 알아본 AsyncPipe의 방식을 활용하면 HTTP 요청을 보내고 캐싱하는 파이프를 만들 수 있다.

 

옵저버블의 객체를 처리하기 위해서는 순수하지 않은 파이프를 사용하고, 이는 컴포넌트 변화감지 로직이 동작할 때마다 실행되기 때문에 불필요하게 실행될 수 있다. 이때 성능이 저하되는 것을 피하기 위해 서버로 요청하는 URL이 변경될 때마 파이프 로직을 실행하고 서버에서 받은 응답을 캐싱하는 방법을 사용하는 것이 좋다.

 

자세한 내용은 공식문서에서 확인하자.

 

파이프 및 우선순위

파이프 연산자는 삼항연산자(?:)보다 높은 우선순위를 가진다.

이는 a ? b : c | x 의 구문이 a ? b : ( c | x ) 로 해석된다는 말이다.

삼항연산자의 결과에 파이프를 적용하고 싶다면 전체 식을 괄호로 바꾸어야 한다.

(a ? b : c) | x

 

 

 

참고사이트

https://ko.wikipedia.org/wiki/%EB%A1%9C%EC%BC%80%EC%9D%BC

로케일 - 위키백과, 우리 모두의 백과사전

https://angular.kr/guide/pipes

Angular 가이드