순수 파이프와 비순수 파이프

기본적으로 순수 파이프

순수 파이프가 빠른 이유

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
  transform(value: string) { return value + "!"; }
}
// pure: only re-runs when value changes

참조 변경과 값 변경

// this will NOT re-run a pure pipe:
this.items.push("new");

// this WILL, new reference:
this.items = [...this.items, "new"];

비순수 파이프 선언하기

@Pipe({ name: "filter", standalone: true, pure: false })
export class FilterPipe implements PipeTransform {
  transform(items: string[], term: string) {
    return items.filter(i => i.includes(term));
  }
}

비순수 파이프를 사용하는 경우

비순수 파이프의 비용

async 파이프는 비순수입니다

<p>{{ data$ | async }}</p>

// component
data$ = this.http.get("/api/data");

async 파이프의 자동 구독 해제

@Component({
  template: "<p>{{ count$ | async }}</p>"
})
export class DemoComponent {
  count$ = interval(1000);
}

순수 파이프에서 변경 피하기

// good for pure pipes:
this.users = this.users.concat(newUser);
this.user = { ...this.user, name: "Ada" };

순수 파이프와 비순수 파이프 선택하기

비순수 파이프 모범 사례

@Pipe({ name: "memoFilter", standalone: true, pure: false })
export class MemoFilterPipe implements PipeTransform {
  private last = "";
  private cache: string[] = [];
  transform(items: string[], term: string) {
    if (term === this.last) return this.cache;
    this.last = term;
    this.cache = items.filter(i => i.includes(term));
    return this.cache;
  }
}

빠른 확인

복습