아직도 setItems? Aggregation Binding 끝 #shorts #SAP #UI5

수동 setItems, 지금 당장 그만

UI5에서 리스트에 아이템을 하나씩 추가하는 코드, 아직도 쓰고 있다면 Aggregation Binding으로 교체할 때입니다. 수동 방식은 모델과 뷰가 분리되지 않아 유지보수가 어렵고, 데이터 변경 시 화면 갱신을 직접 처리해야 합니다.

Aggregation Binding이란

Aggregation Binding은 OData 또는 JSON 모델의 배열 데이터를 UI5 컨트롤의 aggregation(items, rows 등)에 자동으로 연결하는 메커니즘입니다. 데이터가 바뀌면 UI가 자동으로 갱신됩니다.

XML 뷰에서 선언형 바인딩

<List items="{/orders}">
  <StandardListItem
    title="{orderId}"
    description="{customerName}"
    info="{amount}" />
</List>

items="{/orders}"가 Aggregation Binding 선언입니다. /orders는 JSON 모델의 배열 경로이고, StandardListItem이 각 항목의 템플릿이 됩니다.

JSON 모델 설정

const oModel = new JSONModel({
  orders: [
    { orderId: "ORD-001", customerName: "김철수", amount: "150,000" },
    { orderId: "ORD-002", customerName: "이영희", amount: "230,000" }
  ]
});
this.getView().setModel(oModel);

모델에 데이터를 세팅하면 끝입니다. 별도의 addItem() 호출 없이 리스트가 자동으로 채워집니다.

동적 데이터 갱신

// 새 주문 추가
const aOrders = oModel.getProperty("/orders");
aOrders.push({ orderId: "ORD-003", customerName: "박민준", amount: "90,000" });
oModel.setProperty("/orders", aOrders);

모델 데이터만 바꾸면 리스트가 즉시 업데이트됩니다. DOM 조작이나 수동 렌더링은 불필요합니다.

핵심 한 줄

items="{/배열경로}" 한 줄로 수동 setItems를 완전히 대체한다.