[QML] Binding 개념 숙달하기

QML에서 중요한 개념이 바인딩 (Binding)인데, 이 바인딩을 잘 활용하는 것이 QML의 사용성을 매우 높여줄 수 있는 동시에 이로 인한 오류가 QMl을 다루는 데 있어서 가장 스트레스를 주는 요인이기도 하기 때문이다. 때문에 먼저 그 개념을 정확하게 이해하고 갈 필요가 있다.

바인딩은 말 그대로, 둘 이상의 사이를 엮는다는 의미이다. 단순히 이 문장으로는 이해하기 어렵기 때문에 간단한 예제를 통해 살펴보면,

Item {
	id:idItem
    width:500
    height:500
}

Rectangle {
	anchors.centerIn: idItem
    width: idItem.width * 0.5
    height: idItem.height * 0.5
}

위의 예시에서 Rectangle 컴포넌트는 Item 컴포넌트와 바인딩된 상태임을 알 수 있다. 즉 위치와 크기 측면에서 결속이 이뤄지고 있는데, anchors.centerIn 이라는 속성이 idItem을 지시하고 있기 때문에 이 Rectangle은 Item에 중앙정렬하는 위치의 anchor가 형성된다. 또한 width와 height가 각각 idItem의 폭과 높이에 0.5를 곱하고 있기 때문에 Item의 크기에 맞춰 Rectangle의 크기 역시 변할 것임을 알 수 있다.

property int speedValue : idProtocol.speedValue

Text {
	text: speedValue
    font.pixelSize:30
}

 위의 예시는 또 다른 바인딩의 사례를 보여주는데, 우선 속성으로 정의된 speedValue는 idProtocol이라는 컴포넌트 요소의 speedValue라는 속성과 바인딩되어 있다. 또한 이렇게 결속된 속성 값은 다시 Text 컴포넌트의 문자열(text) 속성에 바인딩 된 상태이다. 이렇게 되면 idProtocol의 speedValue가 변경되면 이 요소의 speedValue 속성이 변경되고, 다시 Text의 text 속성이 변경된다. 이것이 바인딩이다.

즉, 위의 사례와 아래의 사례를 종합한 결과와 같이 바인딩은 변수 또는 컴포넌트를 속성에 적용하여 바인딩된 개체 간 동기화를 이루는 것을 의미한다. 이렇게 바인딩된 개체들은 서로 그 상태의 변화를 모니터링하는 관계가 되는데, 이에 따라 한 쪽이 변하면 다른 쪽도 같이 변하는 상태가 된다.

이러한 종류의 동기화는 그 비슷한 사례를 찾아보기가 상당히 어려운 것으로, Qt가 가진 꽤 독특한 특징이라고 할 수 잇다. 이를 잘 사용하면 두 컴포넌트 간 연게한 움직임이나 속성 값에 따른 관계 요소의 리로드(reload) 등을 상당히 직관적이고 쉽게 유도할 수 있어 매우 편리하다. 그러나 부작용도 있는데, 바인딩된 요소에 변화를 주는 과정에서 이 바인딩 관계를 깨거나 하면 큰 혼란을 초래할 수 있기 때문이다. 예를 들어 위의 두번째 예에서

property int speedValue : idProtocol.speedValue

Text {
	text:speedValue
    font.pixelSize:30
    
    MouseArea {
    	anchors.fill:parent
        onClicked: {
        	parent.text = 0
        }
    }
}

위와 같이 코딩한 뒤에 Text 영역을 클릭해 Text.text = 0 으로 변화시켜 버리면, Text의 바인딩 관계가 깨져 다시 speedValue라는 값으로 바인딩을 회복시켜주기 전까지 0이라는 값을 출력할 수 밖에 없는 상태가 된다.

위의 사례는 단순하지만 실제 사례는 상당히 복잡하여 이러한 싨수를 하기 쉬우므로, 바인딩이라는 것이 가질 수 있는 문제점과 그 폐해를 정확하게 이해하고 이를 회복하기 위한 갖가지 방법들을 나름대로 찾는 것이 중요하다. 물론, 중요한 바인딩이라면 애초에 깨지지 않도록 변수를 분리하여 관리하는 것이 핑수적이다.