[UI5] 헷갈리는 SAPUI5 Model View Binding(+Frament)
SAPUI5를 처음 접하거나 화면 구성을 할 때 가장 많이 등장하는 단어가 바로 Model, View, Binding입니다.
추가로 Frament에 대해서도 정리해보았습니다.
Fragment
SAPUI5에서 Fragment(프래그먼트)는
“화면을 작게 잘라서 보관해두는 조각 파일”
= 화면을 재활용하려고 묶어 놓는 곳
✔ 팝업 창
✔ 작은 입력폼
✔ 버튼 2~3개 모아둔 영역
이런 작은 UI 덩어리들을 Fragment로 만들어서 필요할 때 불러서 쓰는 거예요.
중요한 특징은?
> Fragment는 컨트롤러가 따로 없고,
> 불러준 View의 컨트롤러가 그대로 사용됨!
그래서 더 가볍고, 더 간단하고, 재사용도 쉬워요.
Controller 안에서는 loadFragment() 라고 사용하고
Controller 밖에서는sap.ui.core.Fragment.load() 를 사용한다.
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m">
<Text text ="I am Fragment"/>
</core:FragmentDefinition>
SAPUI5 Model
Model은 SAP의 전역변수라고 보면 됩니다.
이 Model은 직접 눈에 보이지 않지만, View와 연결되어 화면을 구성하는 데 꼭 필요합니다.
Model 종류
SAPUI5에는 다양한 Model 종류가 있습니다. 프로젝트에 따라 알맞은 모델을 선택해야 해요.
SAPUI5 View
View는 우리가 실제로 보는 화면입니다.
버튼, 텍스트 필드, 테이블, 그래프 등 모든 UI 요소는 View에 해당합니다.
하지만 중요한 건, View에는 데이터가 직접 들어있지 않습니다.
SAPUI5 Binding
Binding은 Model과 View를 연결하는 파이프라인 역할을 합니다.
Binding의 핵심 기능 2가지
- Model 값이 변경되면, View가 자동으로 업데이트됨
- View에서 사용자가 값을 수정하면, Model에도 자동 반영됨
이게 바로 SAPUI5가 다른 프레임워크보다 편리한 이유입니다.
실제 예제로 이해하는 Binding
다음은 초간단 예제입니다. JSON 모델에 아래와 같이 값이 있다고 해볼게요.
{
"name": "홍길동"
}
그리고 View(XML)에 이렇게 작성합니다:
<Input value="{/name}" />이제 어떤 일이 일어날까요?
- 모델의 /name 값인 홍길동이 Input 필드에 자동 표시됩니다.
- 사용자가 이 값을 변경하면, Model의 값도 함께 바뀝니다.
딱 이게 Binding입니다. 어렵게 느낄 필요 없어요.
바인딩 문법
<Input value=" "> --> X
<Input value="{}"> --> O
만약 controller 랑 manifest에서 연결한 data.json 둘 다 별칭을 주지 않으면 Controller에 있는 변수가 먹힘
Controller가 우선순위 짱이에요!
댓글