앵귤러 기초(Angular basic) 8.ngFor

구조지시문 ngFor에 대해 알아보겠습니다.

 

이번 포스트에서는 아래 내용을 다루고 있습니다.

1. ngFor 사용법
2. for in 과 for of 차이점

---

ngFor 사용법

ngFor를 사용하면 반복 가능한 목록의 각 항목에 대해 DOM 트리를 각각 반복 처리 할 수 있습니다.

일단 하나의 항목을 표시하는 html을 정의하고 Angular에게 해당 블록을 반복해 표시하도록 ngFor를 사용해야 합니다.

 

예를 들어,  영화 데이터의 배열을 출력하고 싶다고 가정해 보겠습니다.

영화 데이터

해야 할 일은 먼저 하나의 테이블 행과 하위 테이블 데이터 요소를 정의하는 것입입니다.

그런 다음 *ngFor를 이용하여 해당 테이블 행 요소와 하위 항목이 영화목록(movies)을 각각 영화 데이터 대해 반복시킵니다.

ngFor의 사용

여기서 let 키워드를 이용해 movie라는 변수를 생성하고 있습니다.

이렇게 생성된 변수(movie)는 현재 요소, 형제 요소 또는 자식 요소의 모든 위치에서 참조할 수 있습니다.

 

MovieListComponent와 템플릿을 살펴보면서 ngFor를 사용해 보겠습니다.

여기 테이블 본문에서는 영화 배열에 있는 영화 데이터마다 테이블 행을 반복하고 싶습니다.

먼저 테이블 본문에서 테이블 행에 대한 tr 요소를 추가한 후 tr 요소에서*ngFor = 'let movie of movies'를 지정합니다.

그리고 tr의 하위 요소를 추가하였습니다.

테이블에 표시할 제품의 각 속성에 대한 td 또는 테이블 데이터 요소를 삽입하겠습니다. 

첫 번째 열에는 영화 이미지가 표시할 예정이지만 지금은 건너뛰도록 하겠습니다.

 

테이블의 각 행은 데이터를 보간(Interpolation)을 사용하여 표시 할 수 있습니다. 

let movie로 지역변수를 만들고 지역 변수를 이용하면 movie가 가지고 있는 속성을 {{movie.name}}와 같이 바인딩할 수 있습니다.

MovieListComponent를 보면 movies배열의 각 속성 이름이 템플릿에서 보간(interpolation)으로 사용하는 이름입니다.

 

이제 브라우저에서 어떻게 보이는지 살펴보겠습니다.

ngFor를 이용해서 반복된 데이터를 처리

잘 표시되고 있는걸 확인할 수 있습니다.

컴포넌트에서 영화 리스트를 위한 배열을 정의 한 후 구조 지시문의 ngFor를 사용하여 영화 목록의 각 영화에 대해 이 테이블 행과 열을 반복시킴으로 반복적으로 영화 정보를 표시할 수 있었습니다.

 

그런데 왜 ngFor를 쓸때는 ngFor in 이 아니라 ngFor of일까요?

for of 과  for in 차이점

이에 대한 이유는 루프에 대한 ES 2015와 관련이 있습니다.

ES 2015는 for...of루프와 for...in루프를 모두 가지고 있습니다.

 

for...of 루프는 foreach 스타일의 루프와 유사합니다.

배열과 같은 반복 가능한 객체에 대해 반복됩니다.

예를 들어, 과일이름의 배열이 있다고 합시다.

const fruteList: string[]= ['사과🍏', '파인애플🍍', 'grape🍇', '아보카도🥑' ]

for(let frute of fruteList) {
	console.log(frute) 
	//출력내용: 사과 🍏파인애플🍍 grape🍇 아보카도🥑
}

for(let frute in  fruteList) {
	console.log(frute); 
	//출력내용: 0 1 2 3
}

만약 for...of를 사용하여 과일 목록을 반복시키면, 각 과일명(객체 자체)이 콘솔에 출력되는 것을 볼 수 있습니다.

반면 for...in는 객체의 property를 반복합니다.

 

위 예제와 같이 배열일 경우 배열 인덱스는 정수인 열거 가능한 속성이며  일반 객체 속성과 동일하다고 생각해 볼 수 있습니다.

따라서 for…in의 경우 콘솔에는 각 배열의 인덱스가 출력 되는걸 볼 수 있습니다.

차이를 쉽게 기억할 수 있도록 인덱스를 반복하는 것으로 간주하셔도 하셔도 무방 합니다.

 

ngFor 지시문이 속성이 아닌 객체에 대해 반복되므로 Angular는 ngFor 식에 of키워드를 사용하게 됩니다.

---

마치기 전에 지금까지의 내용을 가볍게 리마인드 해보겠습니다.

템플릿

인라인 템플릿으로 지정할때는 컴포넌트의 데코레이터에서 template속성을 사용합니다.

백틱을 사용하면 인라인 템플릿에서 여러 줄로 정의가 가능합니다.

긴 템플릿을 사용할 때는 별도 파일로 연결된 템플릿을 사용합니다.

컴포넌트 데코레이터에서 templateUrl 속성을 지정해서 이용합니다.

 

디렉티브

디렉티브를 다른 컴포넌트의 템플릿 요소로 사용이 가능합니다.

컴포넌트 selector의 디렉티브 이름으로 사용이 가능합니다.

앵귤러 모듈에서 관련된 템플릿을 사용할수 있도록 declarations배열에 컴포넌트의 선언이 필요합니다.

 

Interpolation(보간)

보간은 컴포넌트 클래스 property에서 템플릿의 element로의 단방향 바인딩 입니다.

보간은 중괄호와 템플릿표현식으로 정의합니다. 표현식은 간단한 프로퍼티 연결, 계산등 을 할수 있습니다.

 

구조 지시문(ngIf, ngFor)

구조 지시문을 사용할떄는 *를 접두사로 붙입니다.

ngIf를 사용하여 표현식 기반으로 DOM에서 요소와 하위요소를 추가하거나 제거합니다.

할당된 표현식이 true로 평가되면 DOM에 추가되고 false로 평가되면 DOM에서 제거됩니다.

NgFor를 사용하면 배열과 같은 반복 가능한(iterable)객체의 각 요소에 대해 DOM의 요소와 하위 요소를 반복하여 처리를 도와줍니다.

 

 

여기까지 수고하셨습니다.

다음에는 데이터바인딩의 못다한 이야기를 해보도록 하겠습니다.