Angular *ngFor와 store 객체 참조 변경

UI 표시가 제대로 되지 않아서 문제점을 찾다보니 객체가 이유없이 생성, 파괴를 반복한다. 

문제는 해당 객체가 State를 유지하고 있다는 거다. Stateless하면 문제 없을 텐데 상태가 있다 보니 재생성되면 UI 요소가 사라져 버린다. 내가 짠 부분이 아니라 수정하진 않는다. 

 

<ng-container *ngFor="let server of servers$|async;">
  .... something ..... 
</ng-container>

문제가 되는 부분을 보니 ngFor와 NgRx Store가 같이 쓰인다. 두 가지가 복합되서 문제가 발생했다. 

1. NgRx Store에서 State를 가져오는데, 그 때마다 Object Reference가 변경된다. 

2. ngFor는 자기 하부의 DOM을 Object Reference에 의거해서 관리한다. 

두 가지가 조합되면 ngFor는 자기 하부의 모든 DOM을 싹 날리고 재생성하는 일을 반복한다. 

 

그래서 아래와 같이 변경한다. 이렇게 하면 ngFor는 trackBy에 의거해서 자신의 하부의 DOM을 생성한다. 

<ng-container *ngFor="let server of servers$|async; trackBy: trackByGuid">
  .... something ..... 
</ng-container>



  public trackByGuid(index: number, server: Server) {
    return server.guid;
  }