09 파이프(Pipe) 05

pure 파이프와 pure 함수

pure 파이프는 pure 함수를 사용합니다. pure 함수는 입력 값을 처리하고 감지 할 수있는 부작용없이 값을 리턴합니다. 동일한 입력이 주어지면 항상 동일한 출력을 리턴해야 합니다.

이 페이지의 앞부분에서 설명한 파이프는 pure 함수로 구현됩니다. 내장 DatePipe는 pure 함수 구현을 가진 pure 파이프입니다. ExponentialStrengthPipe와 FlyingHeroesPipe도 마찬가지입니다. 몇 가지 단계를 거쳐 FlyingHeroesImpurePipe를 검토했습니다. pure함수를 이용한 impure 파이프입니다.

그러나 pure 파이프는 항상 pure 함수로 구현합니다. 그렇지 않으면 실행할 때 변경된 표현식에 대해 많은 콘솔 오류가 표시됩니다.

 

다음 단계

파이프는 일반적인 디스플레이 값 변환을 캡슐화하고 공유하는 좋은 방법입니다. 스타일과 처럼 사용하여 템플릿의 표현에 포함시켜 뷰의 매력과 사용성을 향상시킵니다.

API 레퍼런스에서 Angular의 내장 파이프 인벤토리를 탐색하세요. 사용자 지정 파이프를 작성하고 커뮤니티에 기여할 수도 있습니다.

 

부록 : FilterPipe 또는 OrderByPipe 없음

Angular는 목록을 필터링하거나 정렬하기 위해 파이프를 제공하지 않습니다. AngularJS에 익숙한 개발자는 이것을 filter 및 orderBy라고 알고 있습니다. Angular에는 이와 같은 파이프가 없습니다.

이것은 빠트린 것이 아닙니다. Angular는 성능이 좋지 않고 적극적인 코딩축소를 방지하기 때문에 이런 파이프를 제공하지 않습니다. filter 및 orderBy에는 객체 프로퍼티를 참조하는 매개 변수를 필요로 합니다. 이 페이지의 앞 부분에서, 당신은 그러한 파이프가 impure 이어야 하고 Angular가 거의 모든 변경 감지 사이클에서 impure 파이프를 호출한다는 사실을 알게되었습니다.

필터링 및 특히 정렬은 비용이 많이 드는 작업입니다. Angular가 이러한 파이프 메소드를 초당 여러 번 호출하면 중간 규모의 목록에서도 사용자 경험이 심각하게 저하 될 수 있습니다. AngularJS 앱에서 filter와 orderBy를 종종 남용했으며, Angular 자체가 느리다는 불만을 낳았습니다. AngularJS가 filter와 orderBy를 제공함으로써 이 성능 장애물을 준비했다는 간접적 인 의미에서 이 불만은 공정합니다.

미심쩍은 부분이 아니라면, 축소 위험 또한 강제적입니다. 영웅들의 목록에 적용된 정렬 파이프를 상상해보십시오. 목록은 다음과 같은 방법으로 영웅의 name과 planet의 원래 프로퍼티로 정렬 될 수 있습니다.

<!-- NOT REAL CODE! --> <div *ngFor="let hero of heroes | orderBy:'name,planet'"></div>

파이프가 인덱싱 (예 : hero [ 'name'])하여 프로퍼티 값을 참조 할 것으로 기대하면서 텍스트 문자열 별로 정렬 필드를 식별합니다. 불행히도, 공격적인 축약은 Hero 프로퍼티 이름을 조작하고 결과적으로 Hero.name과 Hero.planet이 Hero.a와 Hero.b와 같은 것이 되어버립니다. 명확하게 hero [ 'name']이 작동하지 않습니다.

일부 사람들은 이것을 적극적으로 축약하지 않을 수도 있지만 Angular 제품은 누군가가 공격적으로 축약하는 것을 막아서는 안됩니다. 따라서 Angular 팀은 Angular가 제공하는 모든 것이 안전하게 축소 될 것이라고 결정했습니다.

Angular 팀과 경험 많은 Angular 개발자는 필터링 및 정렬 로직을 컴포넌트 자체로 이동하는 것이 좋다고 추천합니다. 컴포넌트는 filteredHeroes 또는 sortedHeroes 프로퍼티를 노출하고 지원 로직을 실행할 시기와 빈도를 제어 할 수 있습니다. 파이프에 넣고 앱에서 공유 할 수있는 모든 기능을 필터링 / 정렬 서비스에 기록하고 컴포넌트에 주입 할 수 있습니다.

이러한 성능 및 축소 고려 사항을 적용하지 않으려면 FlyingHeroesPipe와 유사한 파이프를 직접 만들거나 커뮤니티에서 찾을 수 있습니다.