▶angualrJS - ngFor 개념 뽀개기

▶angualrJS - ngFor 개념 뽀개기

이번에 살펴보려고하는 것은 angualr의 ngFor 개념이다. 대충이해하고서쓰려니 잘 안되기도하고, 금새까먹는다. 

*이 글은 기본적인 내용으로 시작해서 조금씩 더 내용을 추가하는 방식으로 만들어집니다. 많이 도와주세요 :)

app.coponent.ts의 component부분의 코드이다. 

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>Member</h2>
    <li *ngfor="let hero of heroes">
        {{hero}}
    </li>
  `
})

위 코드에서 주의깊게 볼 것은 'template'내의 <li>태그 속  *ngfor영역이다.

이는 다양하게 쓸 수 있다.

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>Member</h2>
    <ul class="heroes">
    <li *ngFor="let hero of heroes">
        {{hero}}
    </li>
    <ul>
  `
})
export class AppComponent {
  title = '1llionaire Recode';
  
  heroes = ["빈지노", "더콰이엇", "도끼"];
  myHero = this.heroes[0];
}

ngFor는 이름그대로 템플릿 중 특정 내용이나 형태를 반복해야 할 때 사용한다. 가장 쉽게는, <li>형태로 리스트를 작성하는 경우에 이를 활용할 수 있다. 

만약, 어떤 데이터에 대해 일괄적으로 리스트형태의 표현을 해야하는 경우가 있는경우. 이런 형태를 활용하면 일일이 html코드를 작성하지 않아도, 쉽게 표현이가능하다. 

솔직히 이런형태를 활용하는 경우를 생각해보면 - 아마 일일이 치는 것을 피하기위해 쓴다기보다는,  어떤 서비스를 구현하다가 데이터의 변화에따라 자동으로 리스트 내용을 변경하고자 할 때 "아..써보고싶은데??"라는 생각이 든다고 말해야 좀 더 와닿을 것 같다. 예를들어 매진되지 않은 비행기표만 출력하려는 경우에, 이런 형태를 활용할 수 있겠다.

아주 단순한 구현형태로는 (깊은 활용가능성은 잠깐 제쳐두고) 다음과 같이 쓸 수 있겠다.

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>Member</h2>
    <ul class="heroes">
    <li *ngFor="let hero of heroes">
        {{hero}}
    </li>
    <li *ngFor="let hero of heroes2">
        {{hero}}
    </li>
    <ul>
  `
})
export class AppComponent {
  title = '1llionaire Recode';
  
  heroes = ["빈지노", "더콰이엇", "도끼"];
  heroes2 = ["Beenzino", "The Quite", "Dok2"];
  myHero = this.heroes[0];
}

뭐가 달라졌나 살펴보자. 좋은 활용 예는 아니지만, appComponent 내에 heroes와 heroes라는 두 배열이 있다. 이 배열안에는 각가의 데이터가 들어있다. 우리는 이 배열을 리스트형태로 표현하기 위해 *ngFor 표현식 끝에 이름만 변경해줄 수 있다. 

​