Angular에서 pipe란 무엇인가요?

Question

Accepted Answer

**Pipe**는 `|` 연산자를 사용하여 템플릿에서 직접 **표시용으로** 데이터를 변환합니다. 기저 데이터를 변경하거나 컴포넌트에 변환 로직을 작성하지 않고도 값(날짜, 통화, 텍스트)을 포맷할 수 있게 해줍니다. ## 내장 pipe 사용하기 ```html

``` 왼쪽의 값이 pipe를 통과하며, 인수는 콜론 뒤에 옵니다(`date:'longDate'`). ## pipe 연결하기 ```html

``` ## async pipe — 두드러지는 존재 ```html

``` `async`는 특히 중요합니다. Observable(예: HTTP 결과)을 구독하고, 방출된 값을 렌더링하며, 컴포넌트가 파괴될 때 **자동으로 구독을 해제**하여, 수동 구독 관리 없이 메모리 누수를 방지합니다. ## 커스텀 pipe 만들기 ```ts import { Pipe, PipeTransform } from "@angular/core"; @Pipe({ name: "truncate" }) export class TruncatePipe implements PipeTransform { transform(value: string, limit = 20): string { return value.length > limit ? value.slice(0, limit) + "…" : value; } } // 사용: {{ longText | truncate:50 }} ``` ## pure pipe와 impure pipe ```text Pure (기본값): 입력 참조가 변경될 때만 재실행 → 효율적 (캐시됨) Impure: 모든 change detection 주기마다 재실행 → 신중히 사용 (예: 필터링) ``` Pure pipe는 캐시되며 입력이 변경될 때만 다시 계산되어 성능이 좋습니다. ## 왜 중요한가 Pipe는 데이터 포맷팅을 선언적으로 유지하고 그것이 속한 템플릿 안에 두어 컴포넌트 로직과 분리합니다. 재사용 가능하고, 연결 가능하며, (pure일 때) 효율적입니다. 내장 pipe는 일반적인 포맷팅을 다루고, 커스텀 pipe는 앱 고유의 변환을 처리하며, `async` pipe는 Observable 데이터를 표시하는 관용적이고 누수 없는 방법입니다. Angular에서 끊임없이 사용하게 될 패턴입니다.