[Angular] ngFor, 반복적인 HTML (feat. 배열 데이터 출력)

Q. 배열에 있는 데이터를 출력해주세요.

프로젝트를 진행하다 보면 반복적인 HTML을 출력하는 경우가 빈번하다. 상품 목록이라던지 글목록이라던지

리스트들을 출력할때 주로 사용된다.

---

배열 리스트 출력한것

 

아래와 같이 같은 html 규격을 담고 있는 div태그들이 반복적으로 나오는 것을 볼 수 있다.

<div>
    <img src="img.svg">
    <div>상품브랜드</div>
    <div>상품이름</div>
    <div>상품가격</div>
</div>

<div>
    <img src="img.svg">
    <div>상품브랜드</div>
    <div>상품이름</div>
    <div>상품가격</div>
</div>

<div>
    <img src="img.svg">
    <div>상품브랜드</div>
    <div>상품이름</div>
    <div>상품가격</div>
</div>

<div>
    <img src="img.svg">
    <div>상품브랜드</div>
    <div>상품이름</div>
    <div>상품가격</div>
</div>

상품 리스트같이 한 두 개가 아닌 데이터들을 다 저렇게 복사 붙여 넣기로 구현한다면 굉장히 비효율적이고 개발 시간도 오래 걸릴 것이다. 이런 반복적인 작업을 Angular에서는 ngFor 디렉티브를 사용해서 해결한다. 바로 사용법을 알아보자.

ngIf와 마찬가지로 *을 맨 앞에 붙이고 *ngFor로 사용한다.

 

// product.component.ts

export class ProductComponent implements OnInit{

	constructor(){}
    
    ngOnInit():void {}
    
    // 해당 구조를 가진 json객체를 서버에서 받아왔다고 가정
    productArr = [
    {
    	brand: '이디야',
        name: '이디야커피',
        price: 1000
    },
    {
    	brand: '커피빈',
        name: '커피빈커피',
        price: 1400
    },
    {
    	brand: '스타벅스',
        name: '스타벅스커피',
        price: 1500
    }];
    
}

productArr이라는 배열 객체를 가지고 html에 뿌려주는 예시이다.

문법은 *ngFor = "let 변수명 of 데이터를 뿌려줄 배열" 이렇게 사용하면 된다.

*ngFor에서는 배열이나 객체만 사용 가능하므로 기억해두자.

// product.component.html

<ng-container *ngFor="let item of productArr">
	<div>
            <img src="img.svg">
	    <div>{{item.brand}}</div>
            <div>{{item.name}}</div>
            <div>{{item.product}}</div>
	</div>
</ng-container>

ng-container를 사용한 이유는 시각적으로 해당 부분을 스크립트적으로 처리했다.라는 것을 보여주기 위해서 사용해주었다. div태그에 사용하여도 문제는 없다. 

 

ngFor를 사용하면 반복적인 HTML을 처리할 수 있다.