Angular에서 파이프 오버 기능을 사용할 때의 이점

이 기사는 원래 내 블로그Benefits Of Using Pipe Over Function In Angular에 게시되었습니다.

Angular에서 다양한 조건과 DOM 조작을 구현하기 위해 함수/메소드를 사용합니까? 그렇다면 저를 믿으십시오. 웹 사이트 성능이 악화될 것입니다. 이 튜토리얼에서는 파이프가 각도 웹 사이트 성능을 향상시키는 방법과 사례 연구를 기반으로 함수보다 파이프를 사용하는 다양한 이점이 무엇인지 설명합니다.

튜토리얼을 바로 시작하기 전에 몇 가지 기본적인 질문부터 시작하겠습니다.

각진 파이프

첫 번째 질문이 떠오릅니다. 파이프란 무엇입니까? 파이프의 간단한 정의 - DOM을 조작하는 데 사용되는 Angular의 장식 기능입니다. 변환되지 않은 값을 입력으로 사용하고 변환된 값을 출력으로 반환합니다.

파이프의 종류

Angular-AsyncPipe, CurrencyPipe, DatePipe, JsonPipe 등에서 다양한 내장 파이프를 제공합니다. 전체 목록here .

코드에서 파이프를 사용하는 방법?

이것은 초보자에게 일반적인 질문일 수 있습니다. 파이프를 어떻게 사용할 수 있습니까? 아래 코드를 확인하십시오.

아래 예제 코드는 date pipe 의 사용을 보여줍니다. 출력이 DOM에서 어떻게 조작되는지 확인하십시오.
app.component.ts

date: Date;

constructor() {
  this.date = new Date();
}

app.component.html

<b>Date Pipe Example: </b>
<span>{{ date | date: 'shortDate'}}</span>

결과 Date Pipe


없는 결과 Date Pipe

순수하고 불순한 파이프

순수 파이프는 입력 값이 변경된 경우에만 실행되는 함수 유형입니다. 상태가 변경되거나 변경 감지가 발생할 때마다 실행되지 않기 때문에 순수라고 합니다. 값이 변경될 때만 호출됩니다. 이렇게 하면 성능이 향상됩니다(아래 사례 연구 참조).

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

@Pipe({
  name: 'customUpper'
})
export class CustomUpperPipe implements PipeTransform {

  transform(value: string): string {
    console.log('Custom pipe is called');
    return value.toUpperCase();
  }
}

Impure 파이프는 모든 Angular 수명 주기 이벤트와 상태 또는 입력 값이 변경될 때마다 실행되는 함수 유형입니다.

@Pipe({
  name: 'customUpper',
  pure: false  // <--- this will convert a pure pipe to impure one
})

It is not advisable to use a method to manipulate your DOM. Use pipes instead of methods if you have a big application and want to improve performance.

Pipe over Function 사용의 이점

메서드로 한 번, 파이프로 한 번 같은 작업을 수행하는 예를 들어 보겠습니다.

파이프를 사용한 대문자

이 사례 연구에서는 순수한 파이프를 사용하여 문자열을 대문자로 변환하는 예를 들어 보겠습니다. 그리고 우리는 출력을 볼 것입니다.

더 잘 보여주기 위해 fake JSON api으로 서버측 데이터 테이블을 생성합니다.

1. 가짜 API 응답으로 데이터 테이블 생성

app.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, Injectable, OnInit } from '@angular/core';

@Injectable()
export class AppService {
  constructor(private http: HttpClient) { }

  public getData() {
    return this.http.get('https://fakestoreapi.com/products');
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [AppService]
})
export class AppComponent implements OnInit {
  date: Date;
  data: any = [];

  constructor(private appService: AppService) {
    this.date = new Date();
  }

  ngOnInit() {
    this.appService.getData().subscribe(data => {
      this.data = data;
    });
  }
}

app.component.html

<table>
  <tr>
    <th>Title</th>
    <th>Category</th>
    <th>Description</th>
  </tr>
  <tr *ngFor="let item of data">
    <td>{{item.title}}</td>
    <td>{{item.category}}</td>
    <td>{{item.description}}</td>
  </tr>
</table>

2. 커스텀 파이프 커스텀 어퍼 만들기

ng g p custom-upper

생성된 파이프에 문자열을 대문자로 변환하는 코드를 넣습니다.

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

@Pipe({
  name: 'customUpper'
})
export class CustomUpperPipe implements PipeTransform {

  transform(value: string): string {
    console.log('Custom pipe is called');  // console.log will let us know how many times it's called
    return value.toUpperCase();
  }
}

3. 템플릿에서 사용자 지정 파이프 사용

템플릿 코드에서 customUpper를 호출합니다.

<td>{{item.category | customUpper}}</td>

4. 출력 확인

앱을 실행하고 브라우저 콘솔을 열어 출력을 확인합니다.



위의 화면에서 콘솔이 20번 인쇄되었음을 알 수 있습니다. API가 20개의 결과를 제공하고 각 행에 대해 한 번씩 실행되기 때문입니다.

이제 순수한 파이프를 사용하지 않고 동일한 예를 확인하십시오.

대문자 사용 방법

위의 사례 연구에서 파이프를 사용하여 문자열을 대문자로 변환하는 출력을 이미 보았습니다. 이 사례 연구에서 우리는 예를 들어 샘플 예제를 취할 것입니다. 문자열을 대문자로 변환하지만 구성 요소에서 메서드를 사용합니다. 그리고 우리는 출력을 볼 것입니다.

1. 메서드를 사용하여 대문자로 변환

구성 요소에 메서드convertToUpperCase를 생성하여 텍스트를 대문자로 변환합니다. 함수에 console.log를 넣으면 UI에서 몇 번 호출되는지 알 수 있습니다.

convertToUpperCase(str: string) {
    console.log('Uppercase fn is called');  // put a console to know how many times the function is called
    return str.toUpperCase();
}

2. 템플릿에서 사용자 지정 대문자 메서드 사용

템플릿에서 메서드를 호출합니다.

<td>{{convertToUpperCase(item.category)}}</td>

출력을 확인하십시오.



콘솔의 출력을 확인하십시오. 파이프에서 호출된 것보다 4배 더 많이 호출되는 것을 볼 수 있습니다. 이것은 복잡한 레이아웃과 바인딩이 있는 대규모 Angular 애플리케이션을 구축하는 경우 큰 차이를 만들 것입니다.

이 기사는 원래 내 블로그Benefits Of Using Pipe Over Function In Angular에 게시되었습니다.

결론

이 기사에서 우리는 Angular에서 Pipe over Function을 사용할 때의 이점에 대해 배웠습니다. 그들은 성능에 큰 차이를 만듭니다.

Angular 애플리케이션을 최적화하려면 다음 문서를 확인하십시오. 5 Best Ways To Optimize Angular For Scaling

기사를 읽어야 합니다:

5 Best Google Charts to Use in Angular (2021)

Angular Material 12 Table, Sorting, Searching & Pagination

RxJS forkJoin: Definition and Real World Uses

5 Great SEO Ideas To Improve Angular Website Ranking

Real World Examples of 5 Common Observable Operators