속성 바인딩

객체의 프로퍼티에는 명시적으로 새 값이 할당될 때까지 일정하게 유지되는 정적 값을 할당할 수 있습니다. 그러나 QML과 동적 객체 동작에 대한 기본 지원을 최대한 활용하기 위해 대부분의 QML 객체는 프로퍼티 바인딩을 사용합니다.

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

그 뒤에서 QML 엔진은 프로퍼티의 종속성(즉, 바인딩 표현식의 변수)을 모니터링합니다. 변경이 감지되면 QML 엔진은 바인딩 표현식을 다시 평가하고 새 결과를 프로퍼티에 적용합니다.

개요

속성 바인딩을 만들려면 원하는 값으로 평가되는 JavaScript 표현식이 속성에 할당됩니다. 가장 간단하게는 바인딩은 다른 프로퍼티에 대한 참조일 수 있습니다. 파란색 Rectangle 의 높이가 상위의 높이에 바인딩된 다음 예시를 살펴보겠습니다:

Rectangle {
    width: 200; height: 200

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

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

바인딩은 표준을 준수하는 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
    }
}

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

자바스크립트에서 속성 바인딩 만들기

바인딩이 있는 프로퍼티는 필요에 따라 자동으로 업데이트됩니다. 그러나 나중에 자바스크립트 문에서 프로퍼티에 정적 값이 할당되면 바인딩이 제거됩니다.

예를 들어, 아래 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 })
    }
}

이제 스페이스 키를 누른 후에도 사각형의 높이는 항상 너비의 세 배가 되도록 자동 업데이트가 계속됩니다.

바인딩 덮어쓰기 디버깅하기

QML 애플리케이션에서 버그가 발생하는 일반적인 원인은 실수로 바인딩을 자바스크립트 문에서 정적 값으로 덮어쓰는 것입니다. 개발자가 이러한 종류의 문제를 추적할 수 있도록 QML 엔진은 필수 할당으로 인해 바인딩이 손실될 때마다 메시지를 전송할 수 있습니다.

이러한 메시지를 생성하려면 qt.qml.binding.removal 로깅 카테고리에 대한 정보 출력을 활성화해야 합니다(예: 호출):

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

로깅 카테고리에서 출력을 활성화하는 방법에 대한 자세한 내용은 QLoggingCategory 문서를 참조하세요.

일부 상황에서는 바인딩을 덮어쓰는 것이 매우 합리적이라는 점에 유의하세요. QML 엔진에서 생성된 모든 메시지는 진단 보조 자료로 취급해야 하며, 추가 조사 없이 문제의 증거로 간주해서는 안 됩니다.

속성 바인딩과 함께 this 사용

JavaScript에서 속성 바인딩을 만들 때 this 키워드를 사용하여 바인딩을 받는 객체를 참조할 수 있습니다. 이는 속성 이름의 모호함을 해결하는 데 유용합니다.

예를 들어 아래의 Component.onCompleted 핸들러는 Item 의 범위 내에 정의되어 있습니다. 이 범위에서 width 는 Item 의 너비가 아니라 Rectangle 의 너비를 참조합니다. 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
    }
}