QML 문서 내의 JavaScript 표현식

QML이 제공하는 JavaScript 호스트 환경은 조건 연산자, 배열, 변수 설정, 루프와 같은 유효한 표준 JavaScript 구문을 실행할 수 있습니다. 표준 JavaScript 속성 외에도, QML 전역 객체에는 UI 구축 및 QML 환경과의 상호 작용을 간소화하는 여러 보조 메서드가 포함되어 있습니다.

QML이 제공하는 JavaScript 환경은 웹 브라우저의 환경보다 더 엄격합니다. 예를 들어, QML에서는 JavaScript 전역 객체의 멤버를 추가하거나 수정할 수 없습니다. 일반 JavaScript에서는 변수를 선언하지 않고 사용하는 경우 실수로 이러한 작업이 이루어질 수 있습니다. QML에서는 이 경우 예외가 발생하므로, 모든 지역 변수는 명시적으로 선언해야 합니다. QML에서 실행되는 자바스크립트 코드에 대한 제한 사항에 대한 자세한 내용은 자바스크립트 환경 제한 사항을 참조하십시오.

QML 문서의 여러 부분에서 JavaScript 코드를 포함할 수 있습니다:

1. 속성 바인딩의 본문. 이러한 JavaScript 표현식은 QML 객체 속성 간의 관계를 설명합니다. 속성의 종속성이 변경되면, 지정된 관계에 따라 해당 속성도 자동으로 업데이트됩니다.
2. 시그널 핸들러의 본문. 이러한 자바스크립트 문장은 QML 객체가 관련 시그널을 발산할 때마다 자동으로 평가됩니다.
3. 사용자 정의 메서드의 정의. QML 객체의 본문 내에서 정의된 자바스크립트 함수는 해당 객체의 메서드가 됩니다.
4. 독립형 자바스크립트 리소스(.js) 파일. 이 파일들은 실제로 QML 문서와 별개이지만, QML 문서로 가져올 수 있습니다. 가져온 파일 내에서 정의된 함수와 변수는 속성 바인딩, 시그널 핸들러 및 사용자 정의 메서드에서 사용할 수 있습니다.

속성 바인딩에서의 JavaScript

다음 예제에서, ` Rectangle `의 ` color ` 속성은 ` TapHandler`의 ` pressed ` 속성에 의존합니다. 이 관계는 조건식을 사용하여 설명됩니다:

import QtQuick 2.12

Rectangle {
    id: colorbutton
    width: 200; height: 80;

    color: inputHandler.pressed ? "steelblue" : "lightsteelblue"

    TapHandler {
        id: inputHandler
    }
}

사실, 표현식의 결과가 해당 속성에 할당할 수 있는 유형의 값인 한, 속성 바인딩 정의에는 어떤 자바스크립트 표현식(아무리 복잡한 표현식이라도)이든 사용할 수 있습니다. 여기에는 부수 효과도 포함됩니다. 그러나 복잡한 바인딩과 부수 효과는 코드의 성능, 가독성 및 유지 관리성을 저하시킬 수 있으므로 권장되지 않습니다.

속성 바인딩을 정의하는 방법에는 두 가지가 있습니다. 가장 일반적인 방법은 앞서 예제에서 보았듯이 속성 초기화 시에 정의하는 것입니다. 두 번째(그리고 훨씬 드문) 방법은 아래와 같이 명령형 자바스크립트 코드 내에서 ` Qt.binding()` 함수가 반환하는 함수를 속성에 할당하는 것입니다:

import QtQuick 2.12

Rectangle {
    id: colorbutton
    width: 200; height: 80;

    color: "red"

    TapHandler {
        id: inputHandler
    }

    Component.onCompleted: {
        color = Qt.binding(function() { return inputHandler.pressed ? "steelblue" : "lightsteelblue" });
    }
}

속성 바인딩 정의 방법에 대한 자세한 내용은 속성 바인딩 문서를 참조하고, 바인딩이 값 할당과 어떻게 다른지에 대한 정보는 ‘속성 할당 대 속성 바인딩’ 문서를 참조하십시오.

신호 핸들러 내의 자바스크립트

QML 객체 유형은 특정 이벤트 발생에 반응하여 신호를 발산할 수 있습니다. 이러한 신호는 신호 핸들러 함수에 의해 처리될 수 있으며, 클라이언트는 사용자 정의 프로그램 로직을 구현하기 위해 이러한 함수를 정의할 수 있습니다.

Rectangle 유형으로 표현된 버튼에 TapHandler 와 Text 레이블이 있다고 가정해 봅시다. 사용자가 버튼을 누르면 TapHandler 는 tapped 신호를 방출합니다. 클라이언트는 onTapped 핸들러에서 JavaScript 표현식을 사용하여 이 신호에 반응할 수 있습니다. QML 엔진은 필요에 따라 핸들러에 정의된 이러한 JavaScript 표현식을 실행합니다. 일반적으로 신호 핸들러는 다른 이벤트를 시작하거나 속성 값을 할당하기 위해 JavaScript 표현식과 바인딩됩니다.

import QtQuick 2.12

Rectangle {
    id: button
    width: 200; height: 80; color: "lightsteelblue"

    TapHandler {
        id: inputHandler
        onTapped: {
            // arbitrary JavaScript expression
            console.log("Tapped!")
        }
    }

    Text {
        id: label
        anchors.centerIn: parent
        text: inputHandler.pressed ? "Pressed!" : "Press here!"
    }
}

신호 및 신호 핸들러에 대한 자세한 내용은 다음 주제를 참조하십시오.

• 신호 및 핸들러 이벤트 시스템
• QML 객체 속성

독립 실행형 함수 내의 JavaScript

프로그램 로직은 자바스크립트 함수에서도 정의할 수 있습니다. 이러한 함수는 QML 문서 내에서 인라인으로(사용자 정의 메서드 형태로) 정의하거나, 외부에서 가져온 자바스크립트 파일에서 정의할 수 있습니다.

사용자 정의 메서드 내의 JavaScript

사용자 정의 메서드는 QML 문서 내에서 정의할 수 있으며, 시그널 핸들러, 속성 바인딩 또는 다른 QML 객체 내의 함수에서 호출될 수 있습니다. 이러한 메서드는 구현이 외부 JavaScript 파일이 아닌 QML 객체 유형 정의(QML 문서)에 포함되기 때문에 흔히 인라인 JavaScript 함수라고 불립니다.

인라인 사용자 정의 메서드의 예는 다음과 같습니다.

import QtQuick 2.12

Item {
    function fibonacci(n){
        var arr = [0, 1];
        for (var i = 2; i < n + 1; i++)
            arr.push(arr[i - 2] + arr[i -1]);

        return arr;
    }
    TapHandler {
        onTapped: console.log(fibonacci(10))
    }
}

TapHandler 가 tapped 신호를 방출할 때마다 fibonacci 함수가 실행됩니다.

JavaScript를 사용하여 QML에서 사용자 정의 메서드를 정의하는 방법에 대한 자세한 내용은 QML 객체 속성 문서를 참조하십시오.

JavaScript 파일에 정의된 함수

복잡한 프로그램 로직은 별도의 JavaScript 파일로 분리하는 것이 가장 좋습니다. 이 파일은 QML 모듈과 마찬가지로 ` import ` 문을 사용하여 QML로 가져올 수 있습니다.

예를 들어, 앞선 예제의 ` fibonacci() ` 메서드는 ` fib.js`이라는 외부 파일로 옮길 수 있으며, 다음과 같이 액세스할 수 있습니다:

import QtQuick 2.12
import "fib.js" as MathFunctions

Item {
    TapHandler {
        onTapped: console.log(MathFunctions.fibonacci(10))
    }
}

QML에 외부 자바스크립트 파일을 불러오는 방법에 대한 자세한 내용은 QML에서 자바스크립트 리소스 가져오기 섹션을 참조하십시오.

신호를 JavaScript 함수에 연결하기

이전 섹션에서 설명한 바와 같이, 신호를 방출하는 QML 객체 유형은 해당 신호에 대한 기본 신호 핸들러도 제공합니다. 그러나 때로는 클라이언트가 다른 QML 객체가 신호를 방출할 때 QML 객체에 정의된 함수를 트리거하기를 원할 수 있습니다. 이러한 시나리오는 신호 연결을 통해 처리할 수 있습니다.

QML 객체가 방출하는 신호는 해당 신호의 ` connect() ` 메서드를 호출하고 JavaScript 함수를 인수로 전달함으로써 JavaScript 함수에 연결할 수 있습니다. 예를 들어, 다음 코드는 ` TapHandler`의 ` tapped ` 신호를 ` script.js`에 있는 ` jsFunction() `에 연결합니다:

import QtQuick
import "script.js" as MyScript

Item {
    id: item
    width: 200; height: 200

    TapHandler {
        id: inputHandler
    }

    Component.onCompleted: {
        inputHandler.tapped.connect(MyScript.jsFunction)
    }
}

// script.js

function jsFunction() {
    console.log("Called JavaScript function!")
}

TapHandler 의 tapped 신호가 발신될 때마다 jsFunction() 가 호출됩니다.

자세한 내용은 ‘메서드 및 신호 연결’을 참조하십시오.

애플리케이션 시작 코드 내의 JavaScript

때때로 애플리케이션(또는 컴포넌트 인스턴스) 시작 시 일부 명령형 코드를 실행해야 할 필요가 있습니다. 시작 스크립트를 외부 스크립트 파일에 전역 코드로 포함시키고 싶은 유혹이 들 수 있지만, QML 환경이 완전히 구축되지 않았을 수 있으므로 이로 인해 심각한 제한이 발생할 수 있습니다. 예를 들어, 일부 객체가 아직 생성되지 않았거나 일부 속성 바인딩이 설정되지 않았을 수 있습니다. 전역 스크립트 코드의 구체적인 제한 사항에 대해서는 ‘JavaScript 환경 제한 사항 ’을 참조하십시오.

QML 객체는 인스턴스화가 완료되면 ` Component.completed ` 연결 신호를 발생시킵니다. 해당 ` Component.onCompleted ` 핸들러 내의 자바스크립트 코드는 객체가 인스턴스화된 후에 실행됩니다. 따라서 애플리케이션 시작 코드를 작성하기에 가장 적합한 위치는 최상위 객체의 ` Component.onCompleted ` 핸들러입니다. 이 객체는 QML 환경이 완전히 설정되었을 때 ` Component.completed ` 신호를 발생시키기 때문입니다.

예를 들어:

import QtQuick 2.0

Rectangle {
    function startupFunction() {
        // ... startup code
    }

    Component.onCompleted: startupFunction();
}

QML 파일 내의 모든 객체(중첩된 객체 및 중첩된 QML 컴포넌트 인스턴스 포함)는 이 부착 속성을 사용할 수 있습니다. 시작 시 실행해야 할 ` onCompleted() ` 핸들러가 두 개 이상인 경우, 이들은 정의되지 않은 순서대로 순차적으로 실행됩니다.

마찬가지로, 모든 ` Component `는 소멸되기 직전에 ` destruction()` 신호를 발생시킵니다.