Polymer 1.0 dom-repeat에서 HTML로 1부터 시작하는 인덱스 표시하기

Polymer.js란 무엇인가?

Polymer.js는 구글(Google)이 개발한 자바스크립트 라이브러리로, HTML 요소를 재사용하여 컴포넌트 기반의 웹 애플리케이션을 손쉽게 구축할 수 있도록 도와줍니다.

dom-repeat에서 인덱스가 0부터 시작하는 이유

Polymer 1.0의 dom-repeat 템플릿은 반복 항목에 대해 기본적으로 0부터 시작하는 인덱스를 제공합니다. 하지만 사용자에게 목록을 보여줄 때는 보통 1번부터 번호를 매기는 것이 자연스럽습니다. 이 경우 인덱스 값에 1을 더해 화면에 표시하면 됩니다.

displayIndex 함수 활용 방법

먼저 HTML 템플릿 안에서 함수를 호출하여 인덱스를 출력합니다:

<span>{{displayIndex(index)}}</span>

그다음 displayIndex 함수를 다음과 같이 정의합니다. 전달받은 인덱스에 1을 더해 반환하는 것이 핵심입니다:

function (index) {
    return index + 1;
}

실전 예제

아래 예제처럼 과목 목록을 반복 렌더링하면서 각 항목 앞에 1부터 시작하는 번호를 붙일 수 있습니다:

<div>과목 <span>{{displayIndex(index)}}</span></div>

이렇게 하면 dom-repeat가 내부적으로 0, 1, 2... 순으로 인덱스를 생성하더라도, 화면에는 1, 2, 3... 형태로 자연스럽게 표시됩니다. 간단한 함수 하나만 추가하면 되기 때문에 목록, 표, 순위 등 번호가 필요한 다양한 UI에서 유용하게 활용할 수 있습니다.