Angular의

파이프는 기본 데이터를 수정하지 않고 템플릿의 데이터를 변환하는 데 사용되는 간단한 함수입니다. 파이프는 값을 가져와서 처리하고 형식이 지정되거나 변환된 출력을 반환합니다. 날짜, 숫자, 문자열은 물론 배열이나 객체의 형식을 지정하는 데 자주 사용됩니다.

기본 데이터 모델을 변경하지 않고도 보기에서 직접 더 읽기 쉽고 관련성이 높은 형식으로 데이터의 형식을 지정하고 표시할 수 있습니다.

파이프를 사용하면 코드를 깨끗하고 읽을 수 있게 유지하는 데 도움이 됩니다. 템플릿이나 구성 요소에 복잡한 논리를 작성하는 대신 해당 논리를 파이프에 캡슐화하여 애플리케이션의 여러 부분에서 재사용할 수 있습니다.
예를 들어 사용자가 기사 게시 날짜를 볼 수 있는 블로그 플랫폼을 개발하는 경우입니다. 날짜는 원시 형식인 '2024–08–31T14:48:00.000Z' 대신 '2024년 8월 31일'과 같이 사용자에게 친숙한 형식으로 표시되어야 합니다. 파이프를 사용하면 구성 요소에서 날짜 형식을 수동으로 지정하는 대신 템플릿에서 Angular에 내장된 DatePipe를 사용할 수 있어 코드가 복잡해지고 가독성이 떨어집니다.

Published on: {{ article.publishDate | date:'longDate' }}

파이프를 적용하려면 위의 코드 예제와 같이 템플릿 표현식 내에서 파이프 연산자(|)를 사용합니다.

내장 파이프

Angular에는 일반적인 작업을 처리하는 여러 가지 파이프가 내장되어 있습니다(DatePipe, UpperCasePipe, LowerCasePipe, MoneyPipe, AsyncPipe, JsonPipe, 등). 이러한 사용 방법을 알면 코드를 더욱 깔끔하고 효율적으로 만들 수 있습니다.

예:

{{ user | json }}
Price: {{ product.price | currency:'USD' }}
{{ user.name | uppercase }}

가격: {{ 제품.가격 | 통화:'USD' }}

{{ 사용자.이름 | 대문자 }}

매개변수화된 파이프

다수의 Angular 파이프는 매개변수를 허용하여 동작을 사용자 정의합니다.

매개변수를 지정하려면 파이프 이름 뒤에 콜론(:)과 매개변수 값

일부 파이프는 추가 콜론으로 구분되는 여러 매개변수를 허용합니다.

매개변수는 선택사항 또는 필수일 수 있습니다. 통화 형식을 지정하고 통화 유형을 매개변수로 지정해야 하는 사용자 지정 파이프가 있다고 가정해 보겠습니다. 이 매개변수가 제공되지 않으면 파이프가 값의 형식을 올바르게 지정하지 못할 수 있습니다.

The product price is {{ price | customCurrency:'USD' }}

1. 매개변수가 있는 DatePipe

Published on: {{ article.publishDate | date:'MMMM d, y, h:mm:ss a' }}

날짜 형식은 '2024년 8월 31일 오후 2시 48분'으로 지정됩니다.

2. 매개변수가 있는 통화파이프

Price: {{ product.price | currency:'EUR':'symbol-narrow':'1.0-0' }}

이렇게 하면 가격이 '€1,235'(소수점 이하 자릿수 없이 반올림됨)로 형식화됩니다.

체인 파이프

복잡한 변형을 달성하기 위해 여러 파이프를 함께 연결할 수 있습니다.

{{ article.content | slice:0:100 | uppercase }}

이렇게 하면 article.content의 처음 100자를 잘라서 대문자로 변환합니다.

맞춤형 파이프

때때로 내장 파이프가 특정 요구 사항을 충족하지 못할 수 있으며 특정 논리를 처리하려면 사용자 지정 파이프를 만들어야 합니다. 방법은 다음과 같습니다.

예:

다음 예에서는 "Hello, Alice!"와 같은 이름에 인사말을 추가하는 파이프를 생성합니다.

다음 명령을 실행하여 새 파이프를 생성하십시오.

ng generate pipe greet

이제 파이프 로직을 포함하도록 src/app 디렉토리에 있는 Greeting.pipe.ts 파일을 수정해 보겠습니다.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'greet',  // This is the name you'll use in the template
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string): string {
    return `Hello, ${value}!`;  // This is the transformation logic
  }
}

파이프가 준비되면 템플릿에서 사용할 수 있습니다.

{{ 'Alice' | greet }}

매개변수화된 사용자 정의 파이프 생성

이제 "안녕, 앨리스!"라고 말할 수 있도록 인사말을 맞춤설정할 수 있도록 하겠습니다. 또는 “환영해요, 앨리스!” 파이프에 전달하는 내용에 따라 다릅니다.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'greet',  // Same pipe name as before
  standalone: true,
})
export class GreetPipe implements PipeTransform {
  transform(value: string, greeting: string = 'Hello'): string {
    return `${greeting}, ${value}!`;  // Now it uses the greeting passed in
  }
}

이제 변환 메소드에는 두 번째 매개변수인 Greeting이 있습니다. 인사말이 제공되지 않는 경우 기본값은 “Hello”입니다.

이제 템플릿에서 인사말을 맞춤설정할 수 있습니다.

{{ 'Alice' | greet:'Hi' }}
{{ 'Bob' | greet:'Welcome' }}

순수 파이프와 불순 파이프

1. 순수 파이프
기본적으로 모든 Angular 파이프는 순수입니다. 순수 파이프는 입력 데이터(예: 숫자 또는 문자열) 또는 객체에 대한 참조(예: 배열 또는 날짜)가 변경될 때만 호출됩니다. 이렇게 하면 파이프가 불필요하게 작동하지 않으므로 순수 파이프가 효율적이고 성능이 향상됩니다.

그러나 항목 배열과 같이 데이터가 더 복잡한 경우 배열에 대한 참조가 변경되지 않았기 때문에 Angular는 배열 내부의 변경 사항(예: 새 항목 추가)을 인식하지 못할 수 있습니다.

필요하지 않은 한 파이프를 순수하게 유지하여 불필요한 재렌더링을 방지하고 성능을 유지하세요.

예:

@Pipe({
  name: "onSale",
  standalone: true,
  pure: true,
})
export class OnSalePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

템플릿에서:

• {{ item.name }} - {{ item.price | formatPrice }}

판매 중인 항목 배열에 새 항목을 추가하면 해당 항목이 목록에 표시될 것으로 예상할 수 있습니다. 그러나 단순히 새 항목을 배열에 푸시하면 배열 참조가 변경되지 않았기 때문에 목록이 업데이트되지 않을 수 있습니다.

2. 불순한 파이프

반면에 불순한 파이프는 Angular가 변경 감지 주기를 수행할 때마다 호출됩니다. 그러나 너무 자주 실행되기 때문에 앱 속도가 느려질 수 있습니다.

예:

@Pipe({
  name: "onSaleImpure",
  standalone: true,
  pure: false,
})
export class OnSaleImpurePipe implements PipeTransform {
  transform(items: Item[]): Item[] {
    return items.filter((item) => item.isOnSale);
  }
}

템플릿에서:

• {{ item.name }} - {{ item.price | formatPrice }}

이제 새 항목을 추가하면 파이프가 변경 사항을 인식하고 목록을 업데이트합니다.

파이프 사용에 대한 모범 사례

1. 파이프를 단순하게 유지하세요. 파이프에서 과도한 계산 방지

2. 파이프 이름을 명확하고 설명적으로 지정하세요.

3. 단일 책임에 파이프 집중 유지

4. 가능하면 불순한 파이프를 피하세요.

5. 맞춤형 파이프를 철저하게 테스트

결론

Angular 파이프는 데이터 변환 작업을 간소화하여 코드를 더욱 모듈화하고 재사용 및 유지 관리하기 쉽게 만듭니다. 이는 애플리케이션 전체에 일관성을 강화하고 템플릿의 가독성을 높이는 데 도움이 되며, 이는 확장 가능하고 유지 관리 가능한 애플리케이션을 개발하는 데 중요합니다.