[Flex] ArrayCollection 에 대한 이해

제가 Flex를 처음 접했을 때 이해가 안되던 부분은 Array와 ArrayCollection 에 대한 것이었습니다. Array를 이용해서 ArrayCollection을 만들긴 했었는데, 왜 그렇게 만들어야 하는지 조차 이해를 못했었죠. ;)

우선 Array 에 대해서 알아봐야겠습니다.
Flex 에 Array 는 자바의  Array와는 달리 동적이어서 크기를 지정하지 않고 임의대로 push, pop 메소드를 이용하여 아이템을 추가 및 삭제할 수 있습니다. 다만, 특정 인덱스 위치에 아이템을 추가한다 던가, 삭제한다던가 하는 것은 불가능 합니다. splice 메소드를 이용하여 특정 위치의 값에 대해 컨트롤 할 수 있습니다만, 상당히 번거롭습니다. 그리고 Array의 특정 아이템이 변경될 경우에 그 변경여부를 즉각 알 수가 없습니다. (var array:Array = new Array() 하는 것 보다 var array:Array = [] 이렇게 하시는 것을 추천합니다. 전자는 느립니다. 왜그런지는 자세히는 모르겠습니다. 에이레네님의 글을 보고 알았거든요 ㅎ)
/** * Array 관련 예제 */ var array:Array = [1, 2, 3, 4, 5]; array[0] = 0; trace(array); // Output: 0,2,3,4,5 array.push(6, 7); trace(array); // Output: 0,2,3,4,5,6,7 array.pop(); trace(array); // Output: 0,2,3,4,5,6 trace(array.length); // Output: 6 array.length = 2; trace(array); // Output: 0,2

이를 가능하도록 하여주는 것이 ArrayCollection 입니다.
다 시 말해서 ArrayCollection은 Array의 wrapper 클래스로 Array의 데이터를 핸들링해주는 역할을 합니다. 엄밀히 말해서는 ArrayCollection이 상속받은 ListCollectionView 클래스에서 지원해주죠. ArrayCollection은 단지 Array를 받을 source 라는 속성과 클래스 직렬화를 위한 readExternal, writeExternal 메소드(IExternalizable 인터페이스를 구현)만이 작성되어 있습니다.
/** * ArrayCollection 실제 구현 코드 */ public class ArrayCollection extends ListCollectionView implements IExternalizable { include "../core/Version.as"; public function ArrayCollection(source:Array = null) // 생성자 { super(); this.source = source; // Array를 생성자에 할당하면 source속성에 넣음 } [Inspectable(category="General", arrayType="Object")] [Bindable("listChanged")] //superclass will fire this public function get source():Array { if (list && (list is ArrayList)) // list가 null이 아니고 ArrayList 형태일때 { return ArrayList(list).source; // ArrayList의 source인 Array를 반환 } return null; } public function set source(s:Array):void { list = new ArrayList(s); // source로 들어온 Array를 ArrayList형태로 할당한다. } /** * 직렬화를 위한 메소드 * 본 포스트에서는 언급하지 않음. */ public function readExternal(input:IDataInput):void { if (list is IExternalizable) IExternalizable(list).readExternal(input); else source = input.readObject() as Array; } public function writeExternal(output:IDataOutput):void { if (list is IExternalizable) IExternalizable(list).writeExternal(output); else output.writeObject(source); } }

그렇다면 ListCollectionView에 대해서 알아봐야겠습니다. 
ListCollectionView 는 ICollectionView, IList, IMXMLObject 이렇게 3가지의 인터페이스를 구현하고 있습니다.(ListCollectionView 는 ArrayCollection과 XMLListCollection이 상속받고 있습니다. ArrayCollection은 Array에 대해서 컨트롤 하지만, XMLListCollection은 XML의 List 형태인 XMLList에 대해 컨트롤 합니다.) 여기서 중요하게 보아야 할 것은 처음 2개인 ICollectionView, IList 인터페이스입니다.

ICollectionView 인터페이스는 해당 Collection에서 데이터를 변경하지 않고, 데이터의 정렬 또는 필터링을 가능하게 해줍니다. 또한 해당 Collection에서 IViewCursor를 제공하여서 데이터에 대한 접근 및 변경을 지원합니다.
/** * sort 관련 예제 */ var array:Array = ["철이","똘이","찰스","뽀삐","순희","영희","나비"]; var myAC:ArrayCollection = new ArrayCollection(array); var sort:Sort = new Sort(); sort.fields = [new SortField(null, true)]; myAC.sort = sort; myAC.refresh(); trace(array); // Output: 철이,똘이,찰스,뽀삐,순희,영희,나비 trace(myAC); /* Output: (Array)#0 [0] "나비" [1] "똘이" [2] "뽀삐" [3] "순희" [4] "영희" [5] "찰스" [6] "철이" */
/** * IViewCursor 관련 예제 */ var array:Array = [1, 2, 3, 4, 5]; var myAC:ArrayCollection = new ArrayCollection(array); var myCursor:IViewCursor = myAC.createCursor(); while (!myCursor.afterLast) { // 커서가 해당 Collection의 마지막까지 이동할떄까지 // doSomething.... myCursor.moveNext(); // 커서를 다음으로 이동 } // 루프 종료시 커서의 current는 아이템의 마지막에 위치 myCursor.insert(6); trace(array); // Output: 1,2,3,4,5,6 myCursor.movePrevious(); myCursor.remove(); trace(array); // Output: 1,2,3,4,5
IList 인터페이스는 ICollectionView에서 IViewCursor를 이용한 순차적인 데이터접근과 달리 인덱스를 기반으로 하여 데이터에 대한 접근 및 변경을 지원합니다.
/** * IList 관련 예제 */ var array:Array = [1, 2, 3, 4, 5]; var myAC:ArrayCollection = new ArrayCollection(array); myAC.addItem(6); // 배열의 맨 마지막에 6의 추가 trace(array); // Output: 1,2,3,4,5,6 myAC.addItemAt(7, 1); // 1번째에 7을 추가 trace(array); // Output: 1,7,2,3,4,5,6 myAC.removeItemAt(1); // 1번째 항목을 제거 trace(array); // Output: 1,2,3,4,5,6 trace(myAC.getItemIndex(3)); // 3이 몇번째 항목인지 조사 Output: 2 trace(myAC.getItemAt(3)); // 3번째 항목의 값 받기 Output: 4

여기서 한가지 재미있는 것은 ListCollectionView는 내부적으로 IList 인터페이스를 이용하여 원본 데이터를 관리하고 있습니다. 위의 ArrayCollection에서 source에 Array를 반영해줄때 list 라는 변수에 넣어주는데 이 list 변수가 ListCollectionView에 보면

private var _list:IList;

와 같이 선언되어 있음을 알 수 있습니다.
ArrayCollecton 의 경우 Array, XMLListCollection의 경우 XMLList가 그 원본 데이터가 됩니다. 하지만 Array 와 XMLList 는 IList 인터페이스를 구현하고 있지 않습니다. 그렇기때문에 ArrayCollection에서는 IList를 구현하는 ArrayList, XMLListCollection에서는 XMLListAdapter 클 래스를 이용합니다. 이 2개의 클래스는 레퍼런스에서도 설명되어있지 않고, 빌더에서 Content Assist로도 나타나지 않습니다. 사용하기 원치 않았던 듯 합니다. ;) 하지만 ArrayCollection을 사용하기는 싫고 간편하게 데이터 접근이 필요한 경우에는 ArrayList를 사용해보는 것도 괜찮을 것 같습니다. (자바의 ArrayList 랑 똑같다고 생각이 듭니다.)
/** * ArrayList 관련 예제 */ var array:Array = [1, 2, 3, 4, 5]; var myAL:ArrayList = new ArrayList(array); myAL.addItem(6); // 배열의 맨 마지막에 6의 추가 trace(array); // Output: 1,2,3,4,5,6 myAL.addItemAt(7, 1); // 1번째에 7을 추가 trace(array); // Output: 1,7,2,3,4,5,6 myAL.removeItemAt(1); // 1번째 항목을 제거 trace(array); // Output: 1,2,3,4,5,6 trace(myAL.getItemIndex(3)); // 3이 몇번째 항목인지 조사 Output: 2 trace(myAL.getItemAt(3)); // 3번째 항목의 값 받기 Output: 4

그럼 이상으로 간단하게 ArrayCollection에 대해 정리해보았습니다. 저도 이만 자야겠습니다. ;)