파이프(Pipe)

파이프는 템플릿에서 데이터를 다른 형식으로 변환하는 함수입니다. 일반적으로 파이프는 사이드 이펙트를 일으키지 않는 "순수 함수(pure function)"인 것이 좋습니다. Angular는 다양한 경우에 사용할 수 있는 기본 파이프도 다양하게 제공하지만, 커스텀 파이프를 만들어서 사용할 수도 있습니다.

참고: 자세한 내용은 파이프 심화 가이드 문서를 참고하세요.

이번 튜토리얼에서는 파이프를 불러와서 템플릿에 적용하는 방법을 알아봅시다.

파이프는 템플릿의 문자열 바인딩 표현식에 이어서 사용합니다. 예제 코드를 확인해 보세요:

      
import {UpperCasePipe} from '@angular/common';@Component({...template: `{{ loudMessage | uppercase }}`,imports: [UpperCasePipe],})class App {loudMessage = 'we think you are doing great!'}

이제 직접 해봅시다:

  1. LowerCase 파이프 불러오기

    먼저, app.ts 파일을 열고 @angular/common 패키지로 제공되는 LowerCasePipe를 로드하세요.

          
    import { LowerCasePipe } from '@angular/common';

  2. imports 배열에 파이프를 추가합니다

    다음으로, @Componen() 데코레이터의 imports 배열에 LowerCasePipe를 추가합니다.

          
    @Component({    ...    imports: [LowerCasePipe]})

  3. 템플릿에 파이프를 적용하세요

    마지막으로, app.ts 파일의 템플릿에 lowercase 파이프를 적용합니다:

          
    template: `{{username | lowercase }}`

파이프는 결과값을 구체적으로 지정하기 위해 인자를 받을 수도 있습니다. 이 내용은 다음 튜토리얼에서 알아봅시다.

P.S. 아주 잘 하고 있습니다 ⭐️