■ Javascript

[Angular.js] 앵귤러JS – ng-repeat에 있는 track by에 대한 설명

angular.js에서 ng-repeat를 사용할때track by란 것이 있습니다.

이것에 대해서 알아보도록하겠습니다.

ng-repeat는 directive입니다. 우리나라 말로 지시자라고 하는데, 앵귤러에서는 해당 지시자를 활용해서

여러가지 templete적인 부분과 plugin 형태의 개발을 함축해 놓았습니다.

 

ng-repeat를 이용해서 기존 템플릿의 for문을 구현할 수 있습니다.

<any ng-repeat="value in array"> </any>

를 사용하면 <any></any> 사이에 해당 scope가 자동으로 생기게 됩니다.

그러면서 $index, $first, $middle … 등과 같은 이미 정의된(pre-defined) 요소들의 값이 할당됩니다.

 

그런데 잘나가다가 하나 이상한 것이 들어오게 됩니다. 그것은 바로 track by란 놈인데,

표현식은 다음과 같습니다.

<any ng-repeat="value in array track by exp"> </any>

exp 부분에 해당하는 속성을 넣어주어야 합니다.

해당하는 속성이란 부분이 매우 애매한데 좀더 풀어서 설명하도록 하겠습니다.

자바스크립트에서 배열은 타 언어와 다르게 중복값을 허용합니다.

즉 array부분에 중복값이 있다면 반드시 distinct할 exp를 작성해 주어야 합니다.

쉽게 예제를 보면

 

<any ng-repeat="v in [0,0,1]"></any>

란 코드가 있을때 0,0 두개의 중복값이 있습니다. track by를 작성해 주지 않으면 각각은 모두 별개의 값으로서 인식되나 키값은 중복값을 허용하지 않게됩니다. ($$hashKey 이용)

여기선 $$hashKey에 키값으로 0이 2개가 들어가서 결국엔 [0, 1]과 같은 해쉬가 생성됩니다.  따라서 for문은 3바퀴를 도는데 값은 두개밖에 없습니다.

즉 에러가 나게 됩니다.

따라서

<any ng-repeat="v in [0,0,1] track by $index"></any>

라고 작성하면 $hashKey가 아닌 $index(위치)를 통해서 다른 3개의 DOM을 생성합니다.

 

그럼 간단하게 track by에 대해서 설명을 마치겠습니다. 안녕~

Standard