Qt Quick 애플리케이션에서 로컬 데이터를 효율적으로 화면에 표현하려면 Model-View-Delegate 아키텍처를 이해하는 것이 필수적입니다. 이 패턴은 데이터 관리 (Model), 시각적 표현 (View), 개별 항목의 렌더링 방식 (Delegate) 을 명확히 분리하여 유지보수성을 높입니다.

SQLite 데이터베이스에 저장된 정보를 QML 목록 위젯으로 표시하려면, JavaScript 를 통해 데이터를 조회하고 이를 ListModel 에 주입한 후 ListView 에서 렌더링하는 흐름을 따릅니다. 아래 예시는 로컬 스토리지를 활용하여 데이터를 읽어오고 UI 에 바인딩하는 구체적인 구현 방법입니다.

먼저 JavaScript 파일에서 데이터베이스 연결 및 조회 함수를 정의합니다. 외부에서 모델 객체를 전달받아 조건에 맞는 데이터를 추출하고 모델에 추가합니다.

import QtQuick.LocalStorage 2.0 as DB

function initConnection() {
    return DB.LocalStorage.openDatabaseSync("project_db", "1.0", "record_table", 10000);
}

function loadRecords(targetModel, filterType) {
    var query = 'SELECT * FROM records;';
    if (filterType === "starred") {
        query = 'SELECT * FROM records WHERE starred = 1;';
    }

    var db = initConnection();
    targetModel.clear();

    db.transaction(function(tx) {
        var result = tx.executeSql(query);
        for (var i = 0; i < result.rows.length; i++) {
            var row = result.rows.item(i);
            targetModel.append({
                "uid": row.uid,
                "title": row.title,
                "timestamp": row.timestamp,
                "starred": row.starred
            });
        }
    });
}

이제 QML 파일에서 뷰 구조를 설계합니다. ListView 를 생성하고 앞서 정의한 데이터 모델과 연결합니다. delegate 속성을 통해 각 행이 화면에 어떻게 그려질지 지정합니다.

ListView {
    id: recordView
    anchors.fill: parent

    model: ListModel {
        id: recordModel
    }

    delegate: Item {
        width: parent.width
        height: 64

        Text {
            id: titleText
            text: title
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: 10
        }
    }
}

데이터 로딩은 컴포넌트 초기화 시점에 수행됩니다. Component.onCompleted 신호를 활용하여 뷰 생성이 완료되면 JavaScript 함수를 호출하여 모델을 데이터로 채웁니다.

ListView {
    id: recordView
    // ... 기타 속성 설정

    Component.onCompleted: {
        JsModule.loadRecords(recordModel, "all")
    }
}