[QML] Component 호출하기

QML은 최근의 다른 여러 프론트엔드 프레임워크 및 라이브러리들과 마찬가지로, 컴포넌트형 모듈화를 지원한다. 유사한 언어에서의 경험이 있다면 굉장히 쉽게 이해할 수 있지만, 웹의 기본 마크업 언어인 HTML에서는 지원하지 않는 형태라 HTML만 접했던 상태라면 낯설게 느껴질 수 있다. 하지만 매우 단순하니, 절대 겁먹을 필요는 없다.

1. 같은 폴더 상에 위치한 QML 불러오기

만약 폴더 트리 상 같은 경로에 있는 QML이라면, 단순히 그 QML의 파일명을 적는 것만으로 모듈을 불러올 수 있다. Container라는 컴포넌트를 작업하면서 같은 폴더에 저장된 Joystick이라는 컴포넌트를 부르고 싶다면,

//Container.QML

Item {
	width:500
    height:300

	Joystick {
    	x:30
        y:30
    }

}

단순히 위와 같이 Joystick이라는 파일명(컴포넌트명)을 단지 써주는 것만으로 해당 컴포넌트를 불러올 수 있다. 이 때 중괄호를 비워두거나 속성을 명시할 수 있는데, 예시처럼 x와 y가 명시되면 해당 x와 y의 위치에 Joystick 요소가 위치하게 된다. 즉, 500 * 300의 크기를 가진 Container 내부의 (30,30) 위치에 Joystick이 위치한 상태로 표시된다는 의미이다. 이 속성은 Joystick을 이루는 최상위 컴포넌트가 승계받은 속성들일 수도 있고 최상위 컴포넌트에 선언된 변수명이 될 수도 있다. 

//Joystick.qml

Item {

	property int colorMode : 0
    width: 440
    height: 240
    
    Rectangle {
    	color:"#000"
        anchors.fill: parent
    }

}

Joystick이 Item으로 감싸진 요소라면 Item이 가지는 속성들을 쓸 수 있으며 Joystick 내부에 property int colorMode 와 같은 변수가 정의되었다면 이것도 쓸 수 있음을 의미한다. 반면 radius와 같은 Item에서 정의되지 않는 속성은 사용할 수 없을 것이다. Joystick이 Item 대신 Rectangle로 감싼 컴포넌트라면 이야기는 달라진다. radius는 Rectangle이 가지는 기본 속성명이기 때문에, 이 경우에는 radius를 사용하면서 Joystick을 호출할 수 있다.

// Joystick.qml

Rectangle {
	color:"#000"
    width:440
    height:240
}

//Container.qml

Item {
	width:500
    height:300
    
    Joystick {
    	radius:10
    }

}

2. 다른 폴더에 위치한 QML 불러오기

다른 폴더에 있는 QML을 호출할 때에도 전체적인 기조는 동일하다. 단지, 해당 폴더를 문서 첫머리에서 'import'하고 있으면 된다. QML은 별도의 인덱싱 과정 없이 폴더를 import 하면 해당 폴더 내의 QML 파일들을 모듈로 불러낼 수 있다. 예를 들어 위의 Joystick을 소스 정리를 위해  comps\라는 폴더로 옮기고 이를 root에 위치한 Container에서 불러서 사용한다면,

//Container.qml

import "comps"

Item {
	width: 500
    height: 300

	Joystick {}

}

 위와 같이 상단에서 import 문으로 해당 디렉토리를 호출하면 바로 불러올 수 있다. 이 폴더가 여럿이어도 가능한데, comps\Joystick.qml과 assets\LogoAnime.qml을 같이 불러와야 하는 상황이라면,

// Container.qml

import "assets"
import "comps"

Item {
	width:500
    height:300
    
    LogoAnime {
    	x:50
        y:50
    }
    Joystick {}
}

위와 같이 두 폴더를 모두 import 하면서 각각을 파일명으로 불러오면 된다. 공통적으로 반복되는 모습이 컴포넌트 모듈의 이름이 대문자로 시작한다는 점인데, QML의 문법에서 컴포넌트 모듈은 대문자로 시작해야 하기 때문이다. 때문에 컴포넌트 모듈로서 사용될 QML 파일은 대문자로 시작하는 이름을 갖도록 저장해야 한다.

한편 위의 예시처럼 여러 폴더에서 다른 성격을 가진 컴포넌트를 호출할 경우 이들을 구별하고 싶거나 하는 목적으로 import as 문법을 사용할 수 있는데, 그럴 경우 컴포넌트는 as로 선언된 객체에 종속된 상태가 된다. 때문에 아래와 같이 조금 다르게 지칭하게 된다.

// Container.qml

import "comps" as Controllers

Item {
	width:500
    height:300
    
	Controllers.Joystick {
    	x:30; y:30;
    }
}

'comps' 폴더를 Controllers로 호출하면서 폴더 내의 컴포넌트들이 Controllers에 속한 상태가 되었는데, 이 경우 Joystick으로 호출하는 것이 아니라 Controllers.Joystick으로 호출해야한다.

이처럼 QML 문법은 이해하기 어렵지 않은 쉬운 규칙으로 이뤄져 있어 이러한 프론트엔드 프레임워크를 처음 접하는 경우라도 이해하고 적응할 수 있다. Javascript 계열이면서 비슷한 난이도를 가진 React도 호출에 있어서 거의 유사한 문법을 가지고 있지만, QML의 경우 속성 호출이나 사용이 좀 더 직관적이라 쉽게 사용할 수 있다.