[Handlebars] 배열 index 로 직접 접근하기

어떤한 콜렉션(Array, List)의 요소에 접근할 때 반복문 없이 특정 index로 직접 액세스 해야할때가 있습니다. 예를 들어 array[0] 처럼 배열의 첫번째 요소에 직접 접근하는 경우가 있겠네요.

핸들바스(Handlebars)에서도 아래와 같이 index를 통해 배열의 특정 요소에 바로 접근이 가능합니다.

{
    "items": [
    { "itemName": "item1" },
    { "itemName": "item2" },
    { "itemName": "item3"}
    ]
}

<div>{{items.0.itemName}}</div>
<div>{{items.1.itemName}}</div>
<div>{{items.2.itemName}}</div>

▼▼▼▼▼▼▼▼

<div>item1</div>
<div>item2</div>
<div>item3</div>

위 처럼 직접 콜렉션에 접근했을 때와 반복문(each)를 통해 반복했을 경우 모두 동일한 결과가 출력되는 것을 확인 하실 수 있습니다.

{{#each items}}
<div>{{itemName}}</div>
{{/each}}

▼▼▼▼▼▼▼▼

<div>item1</div>
<div>item2</div>
<div>item3</div>