속성 바인딩

객체의 속성에는 명시적으로 새로운 값이 할당될 때까지 변하지 않는 정적 값을 할당할 수 있습니다. 그러나 QML과 동적 객체 동작에 대한 내장 지원을 최대한 활용하기 위해, 대부분의 QML 객체는 속성 바인딩을 사용합니다.

속성 바인딩은 개발자가 서로 다른 객체 속성 간의 관계를 지정할 수 있게 해주는 QML의 핵심 기능입니다. 속성의 종속 항목 값이 변경되면, 지정된 관계에 따라 해당 속성이 자동으로 업데이트됩니다.

배경에서 QML 엔진은 속성의 종속성(즉, 바인딩 표현식 내의 변수)을 모니터링합니다. 변경 사항이 감지되면 QML 엔진은 바인딩 표현식을 재평가하고 새로운 결과를 속성에 적용합니다.

개요

속성 바인딩을 생성하려면, 속성에 원하는 값으로 평가되는 JavaScript 표현식을 할당합니다. 가장 간단한 경우, 바인딩은 다른 속성에 대한 참조일 수 있습니다. 다음 예제를 살펴보겠습니다. 이 예제에서 파란색 Rectangle 의 높이는 부모 요소의 높이에 바인딩되어 있습니다:

Rectangle {
    width: 200; height: 200

    Rectangle {
        width: 100
        height: parent.height
        color: "blue"
    }
}

부모 사각형의 높이가 변경될 때마다 파란색 사각형의 높이도 자동으로 동일한 값으로 업데이트됩니다.

QML은 표준을 준수하는 JavaScript 엔진을 사용하므로, 바인딩에는 유효한 JavaScript 표현식이나 문장이 포함될 수 있습니다. 바인딩을 통해 객체 속성에 접근하고, 메서드를 호출하며, ` Date ` 및 ` Math`과 같은 내장 JavaScript 객체를 사용할 수 있습니다. 다음은 앞서 예제에서 사용할 수 있는 다른 바인딩 예시입니다:

height: parent.height / 2

height: Math.min(parent.width, parent.height)

height: parent.height > 100 ? parent.height : parent.height/2

height: {
    if (parent.height > 100)
        return parent.height
    else
        return parent.height / 2
}

height: someMethodThatReturnsHeight()

다음은 더 많은 객체와 유형이 포함된 보다 복잡한 예제입니다:

Column {
    id: column
    width: 200
    height: 200

    Rectangle {
        id: topRect
        width: Math.max(bottomRect.width, parent.width/2)
        height: (parent.height / 3) + 10
        color: "yellow"

        TextInput {
            id: myTextInput
            text: "Hello QML!"
        }
    }

    Rectangle {
        id: bottomRect
        width: 100
        height: 50
        color: myTextInput.text.length <= 10 ? "red" : "blue"
    }
}

이전 예제에서는,

• topRect.width bottomRect.width 에 의존하며 column.width
• topRect.height 다음에 의존합니다 column.height
• bottomRect.color 에 의존하며 myTextInput.text.length

또한, 바인딩으로 사용되는 자바스크립트 함수 내에서 참조되는 모든 속성은 재평가됩니다. 예를 들어, 아래 코드 조각에서 ` Rectangle `의 ` enabled ` 속성이 변경될 때마다 ` x ` 및 ` y ` 속성에 대한 바인딩이 재평가됩니다:

Rectangle {
    x: rectPosition()
    y: rectPosition()
    width: 200
    height: 200
    color: "lightblue"

    function rectPosition() {
        return enabled ? 0 : 100
    }
}

구문적으로 바인딩은 임의의 복잡성을 가질 수 있습니다. 그러나 바인딩이 지나치게 복잡한 경우(예: 여러 줄에 걸쳐 있거나 명령형 루프를 포함하는 경우)에는 해당 바인딩이 단순히 속성 간의 관계를 설명하는 것 이상의 목적으로 사용되고 있음을 나타낼 수 있습니다. 복잡한 바인딩은 코드의 성능, 가독성 및 유지보수성을 저하시킬 수 있습니다. 복잡한 바인딩을 가진 컴포넌트를 재설계하거나, 최소한 바인딩을 별도의 함수로 분리하는 것이 좋습니다. 일반적인 원칙으로서, 사용자는 바인딩의 평가 순서에 의존해서는 안 됩니다.

JavaScript를 사용하여 속성 바인딩 생성하기

바인딩이 설정된 속성은 필요에 따라 자동으로 업데이트됩니다. 하지만 나중에 JavaScript 문장을 통해 해당 속성에 정적 값이 할당되면 바인딩은 제거됩니다.

예를 들어, 아래의 ` Rectangle `은 처음에 ` height `이 항상 ` width`의 두 배가 되도록 보장합니다. 그러나 스페이스 키를 누르면 ` width*3 `의 현재 값이 ` height `에 정적 값으로 할당됩니다. 그 후, ` width `이 변경되더라도 ` height `은 이 값으로 고정된 상태를 유지합니다. 정적 값을 할당하면 바인딩이 제거됩니다.

import QtQuick 2.0

Rectangle {
    width: 100
    height: width * 2

    focus: true
    Keys.onSpacePressed: {
        height = width * 3
    }
}

사각형의 높이를 고정하고 자동 업데이트를 중지하려는 것이라면 이는 문제가 되지 않습니다. 그러나 width 와 height 사이에 새로운 관계를 설정하려는 것이라면, 새로운 바인딩 표현식을 Qt.binding() 함수로 감싸야 합니다:

import QtQuick 2.0

Rectangle {
    width: 100
    height: width * 2

    focus: true
    Keys.onSpacePressed: {
        height = Qt.binding(function() { return width * 3 })
    }
}

이제 스페이스 키를 누르면 사각형의 높이가 계속해서 자동으로 업데이트되어 항상 너비의 3배가 됩니다.

바인딩 덮어쓰기 디버깅

QML 애플리케이션에서 버그가 발생하는 흔한 원인 중 하나는 JavaScript 문에서 정적 값으로 바인딩을 실수로 덮어쓰는 경우입니다. 개발자가 이러한 종류의 문제를 추적할 수 있도록 돕기 위해, QML 엔진은 명령형 할당으로 인해 바인딩이 손실될 때마다 메시지를 출력할 수 있습니다.

이러한 메시지를 생성하려면, 예를 들어 다음을 호출하여 ` qt.qml.binding.removal ` 로깅 범주에 대한 정보 출력을 활성화해야 합니다:

QLoggingCategory::setFilterRules(QStringLiteral("qt.qml.binding.removal.info=true"));

로깅 범주별 출력 활성화에 대한 자세한 내용은 QLoggingCategory 문서를 참조하십시오.

일부 상황에서는 바인딩을 덮어쓰는 것이 전적으로 타당할 수 있습니다. QML 엔진에서 생성된 모든 메시지는 문제 해결을 돕는 참고 자료로 간주되어야 하며, 추가 조사 없이 반드시 문제의 증거로 간주해서는 안 됩니다.

this 와 속성 바인딩 함께 사용하기

JavaScript에서 속성 바인딩을 생성할 때, ` this ` 키워드를 사용하여 바인딩을 받는 객체를 참조할 수 있습니다. 이는 속성 이름의 모호성을 해소하는 데 도움이 됩니다.

예를 들어, 아래의 ` Component.onCompleted ` 핸들러는 ` Item`의 범위 내에서 정의되어 있습니다. 이 범위에서 ` width `는 ` Rectangle`의 너비가 아닌 ` Item`의 너비를 가리킵니다. ` Rectangle`의 ` height `를 자체 ` width`에 바인딩하려면, 바인딩 표현식에서 ` this.width `(또는 ` rect.width`)를 명시적으로 참조해야 합니다:

Item {
    width: 500
    height: 500

    Rectangle {
        id: rect
        width: 100
        color: "yellow"
    }

    Component.onCompleted: {
        rect.height = Qt.binding(function() { return this.width * 2 })
        console.log("rect.height = " + rect.height) // prints 200, not 1000
    }
}