[QML] 반복되는 요소 구현하기: Repeater

우리가 기계를 사용할 떄 얻을 수 있는 이점은 크게 두 가지인데, 누군가 관리하고 있지 않아도 알아서 조건에 맞춰 동작하는 것(조건화)과 반복적인 일을 대신하는 것(반복화)일 것이다. 흔히 if절과 for절로 설명되는 이 두 기능은 많은 코딩언어에서 비슷한 문법으로 작동하는, 매우 주요한 기능이기도 하다.

그러나 QML에서는 이들이 조금 다르게 작동하는데, 어디까지나 마크업 언어이기 때문에 일반적인 프로그래밍 언어에서처럼 if절이나 for절을 선언할 수 없기 때문이다. 그래서 if절도 for절도 각각 우회적인 방법으로 구현되는데, 그 중 오늘은 for절과 대응되는 컴포넌트인 Repeater를 살펴보고자 한다.

Repeater는 이름 그대로, 반복되는 요소를 넣기 위한 컴포넌트 요소이다. 지난 글에서의 Row나 Column, Grid와 마찬가지로 자식 요소로 어떤 컴포넌트 요소를 넣으면 해당 요소가 반복된다.

Repeater {
	model: 5
    Item {
    	width:100
        height:100
    }
}

위의 예시를 수행하면 100*100사이즈의 Item이 5개 만들어진다. 그런데 해당 요소들에 위치에 대한 내용이 없으므로, 이대로 만들면 (0,0) 위치에 중첩된 5개의 아이템이 만들어지며, 가장 마지막에 만들어진 아이템이 최상단에 위치하는 형태가 된다.

Row {
	spacing:5
	Repeater {
    	model:5
        
        Item {
        	width:100
            height:100
        }
    }
}

위의 예시처럼 만들면 어떨까? Row로 Repeater가 감싸져있기 때문에 Item 5개가 5의 여백을 가지며 가로로 쭉 배치된다. 즉, Row 밑에 Item을 5번 반복하여 넣은 것과 동일하다.

명료하게도, model 속성에 선언된 숫자는 반복될 갯수를 의미하고 있다. 그런데, 갯수가 아닌 특정한 배열을 넣고 싶다면 어떻게 해야 할까?

Column {
	spacing:5
    
	Repeater {
    	model:['John', 'Alice', 'Michelle', 'Susan']
        
        Item {
        	width:parent.width
            height:30
            
            Text {
                text:modelData
                font.pixelSize: 12
                anchors.centerIn: parent
            }
        
        }
    }
}

위와 같이 model에 배열을 넣으면, Repeater는 배열의 항목 수 만큼 반복을 수행한다. 반복할 대상은 자식 요소이며, 이 때 model의 각 항목을 데이터로 쓰고 싶다면 modelData라는 값으로 사용하면 된다. 위의 사례의 경우, 각각의 Item 한 가운데에 John, Alice, Michelle, Susan이라는 이름이 떠 있는 형태가 될 것이다. 각 항목의 배열 내 순번을 쓰고 싶으면 'index'를 쓰면 된다. 위의 예시에서 modelData 대신 index를 쓴다면, 0, 1, 2, 3이 쓰여있는 4개의 Item이 일렬로 그려질 것이다.

Repeater는 반복문을 대신하여 위와 같이 반복되는 요소들을 그려줄 수 있지만, 동적인 요소가 복잡하게 들어가는 경우 프로그래밍 언어의 for문처럼 완벽하게 작동하지는 못한다는 한계가 있다. 때문에 원하는 반복을 충실히 수행하도록 하려면 반복되는 요소에 많은 조건을 걸어야 하기도 하며, 우회하여 Javascript 등과 연동하는 방법이 필요할 수도 있다. 이러한 점에서 한계가 있지만, 직관적인 사용성으로 처음 배우는 사람도 굉장히 쉽게 사용할 수 있는 요소이기도 하다. 요약하자면, 처음은 쉽지만 점점 어려워지는 컴포넌트라고 할 수 있겠다.