Angular의 for 루프

Angular에는 서로 다른 템플릿 API가 두 가지 있습니다. AngularJS에서는 ng-repeat를 사용하고, 최신 Angular에서는 해당 문법을 지원하는 버전에서 @for 블록을 사용할 수 있습니다. 애플리케이션 로직에서 JavaScript 배열을 다룰 때는 for 루프나 forEach를 사용하세요. 이들은 데이터를 처리하지만 그 자체로 템플릿 요소를 렌더링하지는 않습니다.

루프를 선택하기 전에 Angular 버전 확인하기

먼저 프로젝트에서 사용하는 프레임워크를 확인하세요. AngularJS는 이전 프레임워크이며 ng-repeat 디렉티브로 컬렉션 항목을 렌더링합니다. 최신 Angular는 다른 템플릿 시스템을 사용합니다. 프로젝트의 Angular 버전이 @for를 지원한다면 이 블록으로 컬렉션을 렌더링할 수 있습니다. 추가하기 전에 프로젝트 버전에서 지원하는 문법인지 확인하세요.

값을 계산하거나 변환하거나 그 밖의 방식으로 처리해야 할 때는 JavaScript for 루프나 forEach를 컴포넌트 또는 컨트롤러 로직에서 사용하세요. 컬렉션을 렌더링하려면 프레임워크에 맞는 템플릿 API를 사용하면 됩니다.

AngularJS에서 ng-repeat로 목록 렌더링하기

AngularJS 템플릿에서 ng-repeat="item in items"를 사용하면 items의 각 값마다 해당 요소의 사본이 하나씩 만들어집니다. 예를 들어 템플릿 조각 <ul><li ng-repeat="item in items">{{ item }}</li></ul>은 컨트롤러나 스코프가 제공하는 컬렉션으로 목록을 렌더링합니다. items가 ['Apple', 'Banana', 'Cherry']라면 페이지에는 과일마다 목록 항목이 하나씩 표시됩니다. 이는 AngularJS 디렉티브이며 최신 Angular의 문법이 아닙니다.

최신 Angular에서 @for로 목록 렌더링하기

@for 블록을 지원하는 버전의 최신 Angular 프로젝트에서는 목록 요소 안에 @for (item of items; track item.id) { <li>{{ item.name }}</li> }를 사용할 수 있습니다. 여기서 items는 컴포넌트의 컬렉션이고 item은 현재 레코드입니다. track item.id는 컬렉션이 바뀔 때 Angular가 각 레코드를 안정적으로 식별하도록 합니다. 데이터에서 고유한 키를 사용하고, 속성 이름은 컴포넌트에 맞게 조정하세요. 이 문법만 보여 주는 예제는 이 글을 위해 Angular 프로젝트에서 실행하지 않았으므로, 프로젝트의 버전과 템플릿 설정에 맞는지 확인하세요.

배열 처리에 JavaScript for와 forEach 사용하기

애플리케이션 로직에서 값을 계산하거나 변환해야 한다면 명령형 JavaScript 루프를 사용하세요. 아래 예제는 가격 컬렉션의 합계를 계산합니다. 이 예제는 독립적인 JavaScript 코드이며 이 글을 위해 실행하지 않았습니다.

const items = [
  { name: 'Notebook', price: 4 },
  { name: 'Pen', price: 2 }
];

let total = 0;
for (const item of items) {
  total += item.price;
}

console.log(`Total: $${total.toFixed(2)}`);

루프는 각 항목을 읽어 가격을 total에 더합니다. 마지막 줄은 형식이 지정된 금액을 JavaScript 콘솔에 전달합니다. 배열의 모든 항목에 작업을 수행하는 또 다른 방법으로 forEach 콜백을 사용할 수 있습니다. 예를 들면 items.forEach(item => console.log(item.name))와 같습니다. 데이터 처리에는 두 방식 중 하나를 사용하고, 템플릿에서 요소를 렌더링하려면 ng-repeat나 지원되는 @for 블록을 사용하세요.

작업에 맞는 루프 방식 선택하기

템플릿 디렉티브와 블록은 컬렉션 데이터를 렌더링된 요소와 연결합니다. JavaScript 루프는 애플리케이션 로직을 실행합니다. 데이터를 변경해야 한다면 템플릿이 사용하는 컴포넌트 또는 컨트롤러 상태를 통해 변경하세요.

Angular 루프에 관한 자주 묻는 질문

최신 Angular에서도 ng-repeat를 사용할 수 있나요?

ng-repeat는 AngularJS 디렉티브입니다. 최신 Angular는 자체 템플릿 문법을 사용하며, 지원하는 버전에서는 @for를 사용할 수 있습니다.

Angular 컴포넌트에서 JavaScript for 루프를 사용할 수 있나요?

네. 계산이나 그 밖의 배열 처리를 위해 컴포넌트 로직에서 사용하면 됩니다. 이 루프는 템플릿 요소를 만들지 않습니다. 처리 결과를 템플릿에 바인딩하고 해당 템플릿의 렌더링 문법을 사용하세요.

forEach는 언제 사용하면 되나요?

배열의 각 항목마다 콜백을 실행하려면 forEach를 사용하세요. 반복을 명시적으로 제어하는 편이 로직에 적합하다면 일반 for 루프를 선택하세요. 어느 쪽도 템플릿 렌더링 디렉티브는 아닙니다.

화면에 표시된 컬렉션에 항목을 추가하려면 어떻게 하나요?

컴포넌트나 컨트롤러가 보유한 컬렉션을 업데이트하면 관련 템플릿 문법이 현재 값을 렌더링합니다. 구체적인 업데이트 방법은 애플리케이션이 상태를 관리하는 방식에 따라 달라집니다.