Angular의 반응형 루프

반응성은 ngFor 루프에서도 작동합니다. 이는 배열이 변경되면 그 변경 사항이 화면에 즉시 반영된다는 의미입니다.

실제로 해보겠습니다. 다음과 같은 배열이 있다고 가정해 보겠습니다:

app/app.component.tsexport class AppComponent {
  public arr: string[] = ['a', 'b', 'c', 'd'];
}

배열을 목록 형태로 루프에서 출력해 보겠습니다:

app/app.component.html<ul>
  <li *ngFor="let elem of arr">
    {{ elem }}
  </li>
</ul>

클릭하면 클래스의 메서드를 호출하는 버튼을 만들어 보겠습니다:

app/app.component.html<button (click)="add()">
  add
</button>

이 메서드에서 배열을 변경해 보겠습니다. 예를 들어, 새 요소를 추가해 보겠습니다:

app/app.component.tsexport class AppComponent {
  public text: string = '';
  
  public add(): void {
    this.arr.push('!');
  }
}

이제 코드를 실행하고 버튼을 누르면 버튼을 누른 직후 목록에 새 요소가 표시됩니다.