[QML] 가장 기본적인 컴포넌트, Item

HTML(HyperText Markup Language)에서 가장 기본적인 요소를 꼽으라면 <div>와 <span>같은 태그가 될 텐데, QML에서는 Item이 이와 비슷한 지위를 갖는다. Item은 말 그대로 단순히 어떤 물체를 정의하는 것인데, 많은 컴포넌트 요소가 이 Item을 상속받아 사용하며, 따라서 Item이 가진 속성의 대부분이 공용되는 반면에 Item은 다른 컴포넌트의 많은 속성들을 사용할 수 없기도 하다.

Item이 갖는 대표적인 속성들이 주로 크기와 위치에 관계된 속성들로, 예를 들어 x,y, width, height와 같은 기본적인 레이아웃 관련 속성들과 anchors와 같은 바인딩 관련 속성이 그것이다. 우선 x, y, width, height의 경우 그 이름 그대로 x좌표, y좌표, 너비, 높이를 의미한다. anchors는 이전 글에서 보았던 바인딩과 관련이 있는데, anchors에 속하는 하위 속성들을 통해 다른 요소와 결속하여 움직이도록 할 수 있다. 예를 들어 anchors.top: componentId.bottom 과 같이 자신의 top 부분을 특정 컴포넌트의 bottom과 결속하는 식으로 바인딩을 걸 수 있는데, 이렇게 걸어놓은 채로 componentId에 해당하는 컴포넌트를 움직이면 하단에 붙은 채로 같이 움직이는 것을 확인할 수 있다. 대표적인 anchors 속성은 아래와 같다.

• anchors.top / bottom / left / right : 상/하/좌/우 위치에 결속
• anchors.topMargin / bottomMargin / leftMargin / rightMargin : 상/하/좌/우 위치 결속 시 여백
• anchors.centerIn : 중앙에 위치
• anchors.fill : 채우기

Item {
	width:400
    height:200
    
    Item {
    	id:item1
    	anchors.fill: parent
    }
    
    Item {
    	id:item2
    	width:100
        height:100
        anchors.centerIn:parent
    }

}

위의 사례에서 item1의 경우, 특별히 크기나 위치 등을 지정하지 않아도 400*200의 부모 컴포넌트의 크기와 위치를 자동으로 상속받는 동일한 크기의 Item이 된다. item2의 경우는, 크기를 100*100으로 가지며 부모 컴포넌트의 정 가운데에 위치하는 Item이 된다.

Item의 특징은 렌더링을 해도 보이지 않는 요소라는 점인데, 위에서 언급한 HTML의 <div>나 <span>의 기본 속성과 유사하면서도 이 둘이 배경색이나 테두리 등 시각 요소를 적용할 수 있는 것과는 달리 오로지 위치와 크기만을 갖는 비시각요소라는 점이 다르다. Item을 상속받는 대표적인 시각적인 요소가 Rectangle 인데, Rectangle은 Item의 기본 속성을 모두 동일하게 가지면서도 color(배경색), radius(모서리 r값), border(테두리) 등의 시각적인 속성을 갖는다는 점이 다르다.

Item {
	
    width:200
    height:200
    
    Rectangle {
        width:100
        height:100
        anchors.centerIn:parent // Okay
        color:"transparent" // Okay
    }

    Item {
        width:100
        height:100
        anchors.centerIn:parent // Okay
        color:"transparent" // Error
	}
}

위의 코드에서 하위 Item과 Rectangle은 둘 다 부모 Item의 가운데에 위치하는 100*100의 보이지 않는 영역이지만, Rectangle은 렌더링에 성공하고 Item은 에러를 발생한다. Item에는 color라는 속성이 존재하지 않기 때문이다. 이 color 라인을 삭제하면 둘다 보이지 않는 100*100의 사각 영역으로 부모 Item의 중앙에 위치할 것이다.

그렇다면 이 경우 Item와 Rectangle이 같다고 할 수 있을까? 엄밀히 말해서는 그렇지 않다. Item은 영역으로서, Rectangle은 그보다는 당장은 보이지 않더라도 사각형 시각 요소로서 보는 것이 타당하다. 그래서 복합된 개체로서의 컴포넌트를 만들 때 최상위에는 비록 배경색이 되는 사각형 요소로 감싸서 만드는 것이 가능하더라도 왠만하면 Item으로 전체 요소의 영역을 지정한 뒤 하위 요소로 배경색을 Rectangle로 넣는 식의 처리가 더 바람직하다. 영역을 가장 기본적인 요소가 정의한 상태에서 그 색상이나 변화 등 세부적인 요소의 정의로 나아가는 것이 더 본질적이고 동질적으로 깔끔한 규칙을 만들 수 있을 것이기 때문이다. Item은 그러한 근본적인 의미로서 매우 중요한 컴포넌트라고 할 수 있다.