Two-way Binding 잘못 쓰면 큰일 — 무한 루프 탈출법 #shorts #SAP #UI5

Two-way Binding이란?

유아이파이브의 Two-way Binding은 View와 Model이 서로 동기화되는 방식입니다. 사용자가 입력하면 Model이 업데이트되고, Model이 바뀌면 View가 자동으로 갱신됩니다. 편리하지만 잘못 쓰면 무한 루프에 빠집니다.

무한 루프 발생 패턴

Model 변경 이벤트 핸들러 안에서 다시 Model을 변경하면 루프가 발생합니다.

// 잘못된 패턴
oModel.attachPropertyChange(function() {
  oModel.setProperty("/value", newValue);
});

올바른 패턴

Model 변경과 View 업데이트를 분리하세요.

// Input 이벤트에서만 Model 업데이트
onInputChange: function(oEvent) {
  var sValue = oEvent.getParameter("value");
  this.getModel().setProperty("/value", sValue);
},
// XML Binding 선언으로 View 자동 갱신
// value="{/value}" 만으로 충분

JSONModel vs ODataModel

JSONModel: Default Two-way, 로컬 데이터에 적합. ODataModel v4: submitBatch()로 변경사항 일괄 제출.

oModel.submitBatch("myGroup");

핵심 한 줄

Two-way Binding = View와 Model 자동 동기화 — 이벤트 핸들러 안에서 Model 재변경은 절대 금지.