SAPUI5 MVC 구조 이해하기

SAPUI5 MVC 구조 이해하기

 

---

 

1. MVC란 무엇인가?

MVC(Model-View-Controller)는 애플리케이션을 역할별로 분리하여 관리하는 대표적인 소프트웨어 설계 패턴이다.

MVC는 다음 세 가지 구성 요소로 이루어진다.

구성 요소역할

Model	데이터 관리
View	화면(UI) 표시
Controller	사용자 이벤트 및 로직 처리

SAPUI5는 기본적으로 MVC 패턴을 기반으로 설계되었으며, 모든 애플리케이션이 MVC 구조를 따르는 것을 권장한다.

 

---

 

2. SAPUI5에서 MVC를 사용하는 이유

초기 웹 개발에서는 HTML, JavaScript, 데이터 처리 코드가 하나의 파일에 섞여 있는 경우가 많았다.

예를 들어 다음과 같은 문제가 발생한다.

• 유지보수 어려움
• 코드 중복 증가
• 기능 추가 시 영향 범위 확대
• 협업 효율 저하

SAPUI5는 MVC 구조를 통해 다음과 같은 장점을 제공한다.

• 유지보수성 향상: UI 변경 시 View만 수정
• 재사용성 향상: Model과 Controller를 다른 화면에서도 활용 가능
• 협업 효율 증가: 프론트엔드 개발자와 백엔드 개발자의 역할 분리
• 테스트 용이: 비즈니스 로직을 독립적으로 테스트 가능

 

---

 

3. Model, View, Controller 역할

Model : Model은 애플리케이션 데이터를 관리한다.

예를 들어 사용자 정보가 있다고 가정해 보자.

{
  "name": "Kim",
  "age": 30
}

이 데이터는 Model에 저장된다.

SAPUI5에서 자주 사용하는 Model 종류는 다음과 같다.

Model설명

JSONModel	로컬 데이터
ODataModel	SAP Gateway 데이터
ResourceModel	다국어(i18n)

 

View: View는 사용자에게 보여지는 화면을 정의한다.

대부분 XML View를 사용한다.

예시:

<Text text="{/name}" />

View는 데이터를 직접 처리하지 않는다.

오직 화면 표현에 집중한다.

 

Controller: Controller는 사용자 이벤트를 처리한다.

예시:

onPress: function () {
    MessageToast.show("Button Clicked");
}

버튼 클릭, 데이터 조회, 화면 이동 등의 로직이 Controller에 작성된다.

 

---

 

4. SAPUI5 MVC 프로젝트 구조

일반적인 프로젝트 구조는 다음과 같다.

webapp
│
├── controller
│   └── Main.controller.js
│
├── view
│   └── Main.view.xml
│
├── model
│
├── i18n
│
├── Component.js
│
└── manifest.json

각 폴더의 역할은 다음과 같다.

• view: 화면 정의
• controller: 이벤트 처리
• model: 데이터 관리
• i18n: 다국어 처리
• Component.js: 애플리케이션 초기화
• manifest.json: 앱 설정 파일

 

---

 

5. MVC 동작 흐름

사용자가 버튼을 클릭하는 상황을 예로 들어보자.

사용자
 ↓
View
 ↓
Controller
 ↓
Model
 ↓
Controller
 ↓
View
 ↓
사용자 화면 갱신

실제 동작 과정

1. 사용자가 버튼 클릭
2. View에서 이벤트 발생
3. Controller 이벤트 실행
4. Model 데이터 변경
5. Data Binding 자동 반영
6. View 화면 갱신

개발자가 직접 DOM을 수정하지 않아도 된다.

이것이 SAPUI5 데이터 바인딩의 핵심이다.

 

---

 

6. 실제 예제 살펴보기

Model 설정

Component.js

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/model/json/JSONModel"
], function (UIComponent, JSONModel) {
    "use strict";

    return UIComponent.extend("demo.Component", {
        init: function () {
            UIComponent.prototype.init.apply(this, arguments);

            const oModel = new JSONModel({
                name: "Amy"
            });

            this.setModel(oModel);
        }
    });
});

 

 

View 작성

Main.view.xml

<mvc:View
    controllerName="demo.controller.Main"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">

    <VBox>
        <Text text="{/name}" />

        <Button
            text="변경"
            press=".onChangeName"/>
    </VBox>

</mvc:View>

 

 

Controller 작성

Main.controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function (Controller) {
    "use strict";

    return Controller.extend(
        "demo.controller.Main",
        {
            onChangeName: function () {

                const oModel =
                    this.getView().getModel();

                oModel.setProperty(
                    "/name",
                    "SAPUI5"
                );
            }
        }
    );
});

 

 

실행 결과

초기 화면

Amy
[변경]

버튼 클릭 후

SAPUI5
[변경]

View를 수정하지 않았지만 화면이 자동 변경된다.

이는 Data Binding 덕분이다.

 

---

 

7. 데이터 바인딩과 MVC

SAPUI5 MVC를 이해하려면 Data Binding을 반드시 알아야 한다.

대표적인 바인딩 방식은 다음과 같다.

Property Binding

<Text text="{/name}" />

단일 속성 연결

 

Element Binding

<ObjectHeader
    title="{name}"
    number="{age}" />

객체 전체 연결

 

Aggregation Binding

<List items="{/users}">
    <items>
        <StandardListItem
            title="{name}" />
    </items>
</List>

목록 데이터 연결

 

---

 

8. MVC 사용 시 주의사항

• View에 비즈니스 로직 작성 금지

잘못된 예

<Text text="{= ${price} * 0.1 }" />

복잡한 계산은 Controller 또는 Formatter로 분리하는 것이 좋다.

 

• Controller 비대화 방지: Controller가 너무 커지면 유지보수가 어려워진다.

권장 방법

• Formatter 사용
• Util 함수 분리
• Service 계층 분리

 

• Model 직접 접근 최소화: 여러 곳에서 Model을 직접 수정하면 추적이 어려워질 수 있다. Controller를 통해 관리하는 것이 좋다.

 

---

 

마무리

SAPUI5의 MVC 구조는 화면(View), 로직(Controller), 데이터(Model)를 명확하게 분리하여 유지보수성과 확장성을 높여준다.

특히 SAPUI5에서는 데이터 바인딩이 MVC와 긴밀하게 연결되어 있기 때문에 MVC를 이해하면 이후 학습하게 될 JSONModel, ODataModel, Routing, Fiori Elements까지 훨씬 쉽게 접근할 수 있다.

MVC는 SAPUI5 개발의 가장 중요한 기초 개념이다. 이후 학습에서는 데이터 바인딩(Data Binding)을 함께 공부하는 것을 추천한다.

 

참고 자료

• SAPUI5 SDK MVC Documentation
• SAPUI5 Walkthrough Tutorial
• OpenUI5 Documentation