Angular 8 애플리케이션에서 TrackBy를 사용하는 방법

블로그

Angular 8 애플리케이션에서 TrackBy를 사용하는 방법

이 기사에서는 Angular 애플리케이션에서 Track By를 사용하는 방법을 배울 것입니다.

모든 애플리케이션에서 애플리케이션을 더 빠르게 실행하려면 애플리케이션의 성능을 확인해야 합니다. ngular는 API에서 요청할 때마다 들어오는 데이터를 추적하는 데 사용되는 trackBy라는 메서드를 제공합니다.

API 요청에서 컬렉션으로 오는 데이터가 있고 ngFor 지시문을 사용하여 웹 페이지를 통해 데이터를 변경해야 한다고 가정합니다. 이 경우 Angular는 데이터와 관련된 모든 DOM 요소를 제거하고 DOM 트리에서 다시 생성합니다. 이는 많은 양의 데이터가 API에서 오는 경우 많은 DOM 조작이 발생함을 의미합니다.

전제 조건

  • Angular에 대한 기본 지식
  • Visual Studio 코드가 설치되어 있어야 합니다.
  • Angular CLI가 설치되어 있어야 합니다.
  • 노드 JS가 설치되어 있어야 합니다.

1 단계

다음 NPM 명령을 사용하여 새 Angular 프로젝트를 생성해 보겠습니다.

ng new trackBy

2 단계

처음부터 확률적 경사하강법 파이썬

이제 다음 명령을 사용하여 새 구성 요소를 생성해 보겠습니다.

ng g c trackBy-example

3단계

이제 trackBy-example.component.html 파일을 열고 파일에 다음 코드를 추가합니다.

{{SampleMessage}}

Art.No Brand Price/Unit Provider P. Art. N S. A/C
{{product.ArtNo}} {{product.Brand}} {{product.Price }} {{product.Provider}} {{product.ProviderArtNo}} {{product.SalesAccount}}
New Companies

여기에서는 아직 trackBy 함수를 사용하지 않습니다.

아래 코드에서 구조 지시문 *ngFor를 사용하여 trackby를 적용하는 방법을 확인할 수 있습니다.

마이크로 캡 암호화 보석 2021

4단계

이제 trackBy-example.component.ts 파일을 열고 이 파일에 다음 코드를 추가합니다.

import { Component, OnInit } from '@angular/core'; import { ProductsService } from '../product.service'; @Component({ selector: 'app-trackby', templateUrl: './trackby.component.html' }) export class TrackbyComponent implements OnInit { companyProduct: any[]; SampleMessage='Example of Angular Fetching records using TrackBy'; constructor(private productService: ProductsService) { } ngOnInit() { this.companyProduct = this.productService.getAllProductsUsingTrackBy(); } getNewCompanies(): void { this.companyProduct = this.productService.getAllProductsUsingTrackByExample(); } trackByArtNo(index: number, companyProduct: any): string { return companyProduct.ArtNo; } }

TrackBy 함수는 두 개의 인수를 취합니다. 첫 번째는 인덱스이고 두 번째는 현재 항목입니다. 고유 식별자를 반환 인수로 반환할 수 있습니다.

trackByArtNo(index: number, companyProduct: any): string { return companyProduct.ArtNo; }

5단계

이제 product.service.ts 파일을 열고 다음 코드를 추가합니다.

import { Injectable } from '@angular/core'; @Injectable() export class ProductsService { employees: any[]; constructor() { } getAllProductsUsingTrackBy() { return this.employees = [ { ProductId: 1, ArtNo: '100', Provider: 'OppoProvider', ProviderArtNo: '1Yu', Brand: 'Oppo', Price: 7810.23, BuyAccount: '123', SalesAccount: '321' }, { ProductId: 1, ArtNo: '101', Provider: 'OppoProvider', ProviderArtNo: '1Yu', Brand: 'Oppo', Price: 2310.23, BuyAccount: '123', SalesAccount: '321' }, { ProductId: 1, ArtNo: '102', Provider: 'OppoProvider', ProviderArtNo: '1Yu', Brand: 'Oppo', Price: 7810.23, BuyAccount: '123', SalesAccount: '321' }, { ProductId: 1, ArtNo: '103', Provider: 'OppoProvider', ProviderArtNo: '1Yu', Brand: 'Oppo', Price: 5810.23, BuyAccount: '123', SalesAccount: '321' } ]; } getAllProductsUsingTrackByExample() { return this.employees = [ { ProductId: 1, ArtNo: '100', Provider: 'OppoProvider', ProviderArtNo: '1Yu', Brand: 'Oppo', Price: 7810.23, BuyAccount: '123', SalesAccount: '321' }, { ProductId: 1, ArtNo: '101', Provider: 'OppoProvider', ProviderArtNo: '1Yu', Brand: 'Oppo', Price: 2310.23, BuyAccount: '123', SalesAccount: '321' }, { ProductId: 1, ArtNo: '102', Provider: 'OppoProvider', ProviderArtNo: '1Yu', Brand: 'Oppo', Price: 7810.23, BuyAccount: '123', SalesAccount: '321' }, { ProductId: 1, ArtNo: '103', Provider: 'OppoProvider', ProviderArtNo: '1Yu', Brand: 'Oppo', Price: 5810.23, BuyAccount: '123', SalesAccount: '321' }, { ProductId: 1, ArtNo: '104', Provider: 'OppoProvider', ProviderArtNo: '1Yu', Brand: 'Oppo', Price: 4770.23, BuyAccount: '143', SalesAccount: '211' }, ]; } }

이제 'npm start' 또는 'ng serve' 명령을 사용하여 프로젝트를 실행하고 출력을 확인할 차례입니다.

아래 이미지에서처럼 New Companies를 클릭하면 테이블에 하나의 새 항목이 추가됩니다.

globals() 파이썬

이미지제목입니다

trackBy 함수를 사용하지 않고 일반 *ngFor 지시문을 사용하면 Angular 애플리케이션은 모든 DOM 요소를 제거하고 동일한 데이터가 수신되더라도 DOM 트리에서 다시 생성합니다. 데이터가 많은 경우 애플리케이션 성능이 느려질 수 있습니다.

이미지제목입니다

그러나 trackBy의 도움으로 아래 이미지에서 볼 수 있듯이 새 DOM을 생성하지 않습니다. DOM에 새 데이터만 추가되어 애플리케이션 성능이 향상됩니다.

이미지제목입니다

결론

이 기사에서는 Angular 8 애플리케이션에서 NgFor와 함께 trackBy를 사용하는 방법을 살펴보았습니다.

이 기사에 대한 귀중한 피드백/의견/질문을 제공하십시오. 이 기사를 좋아하고 이해했다면 어떻게 개선할 수 있는지 알려주세요.

감사합니다!

#angular #Angular 8의 NgFor #프로그래밍