각도 파이프: 종합 가이드

Angular의

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

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

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

<p>Published on: {{ article.publishDate | date:'longDate' }}</p>

파이프를 적용하려면 위 코드 예시와 같이 템플릿 표현식 내에서 pipe 연산자(|)를 사용하세요.

내장 파이프

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

예:

<pre class="brush:php;toolbar:false">{{ user | json }}

Price: {{ product.price | currency:'USD' }}

{{ user.name | uppercase }}

매개변수화된 파이프

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

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

을 추가하세요.

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

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

<p>The product price is {{ price | customCurrency:'USD' }}</p>

1. 매개변수가 있는 DatePipe

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

날짜 형식은 '2024년 8월 31일 오후 2시 48분'입니다.

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

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

가격 형식은 '€1,235'(소수점 이하 자릿수 없이 반올림됨)입니다.

체인 파이프

여러 파이프를 연결하여 복잡한 변형을 구현할 수 있습니다.

<p>{{ article.content | slice:0:100 | uppercase }}</p>

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
  }
}

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

<p>{{ 'Alice' | greet }}</p>

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

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

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이 있습니다. 인사말이 없을 경우 기본적으로 “안녕하세요”로 표시됩니다.

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

<p>{{ 'Alice' | greet:'Hi' }}</p>
<p>{{ 'Bob' | greet:'Welcome' }}</p>

순수 파이프와 불순 파이프

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);
  }
}

템플릿에서:

<ul>
  <li *ngFor="let item of (items | onSale)">
    {{ item.name }} - {{ item.price | formatPrice }}
  </li>
</ul>

If you add a new item to the items array that’s on sale, you might expect it to show up in the list. But if you simply push the new item into the array, the list might not update because the array reference hasn’t changed.

2. Impure Pipes

An impure pipe, on the other hand, is called every time Angular performs a change detection cycle. However, because they run so often, they can slow down your app.

Example:

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

In your template:

<ul>
  <li *ngFor="let item of (items | onSaleImpure)">
    {{ item.name }} - {{ item.price | formatPrice }}
  </li>
</ul>

Now, when you add a new item, the pipe will notice the change and update the list.

Best Practices for Using Pipes

1. Keep Pipes Simple. Avoid Heavy Computations in Pipes

2. Name Pipes Clearly and Descriptively

3. Keep Pipes Focused on a Single Responsibility

4. Avoid Impure Pipes When Possible

5. Test Custom Pipes Thoroughly

Conclusion

Angular pipes streamline data transformation tasks, making your code more modular, reusable, and maintainable. They help to enforce consistency across the application and improve the readability of your templates, which is crucial for developing scalable and maintainable applications.

위 내용은 각도 파이프: 종합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!