ComboBox vs Select — 입력 가능 vs 선택만 #shorts #SAP #UI5

ComboBox와 Select — 언제 어떤 것을 쓰는가

SAP UI5에서 드롭다운 형태의 입력 컨트롤은 크게 두 가지로 나뉩니다. sap.m.Select는 목록에서 하나를 반드시 선택해야 합니다. sap.m.ComboBox는 목록에서 선택하거나, 직접 텍스트를 입력하는 두 가지 모두를 허용합니다. 이 차이가 UX에 큰 영향을 주기 때문에 용도를 명확히 구분해야 합니다.

Select 기본 구조

<!-- XML View -->
<Select id="countrySelect"
        selectedKey="{/selectedCountry}"
        change="onCountryChange">
  <items>
    <core:Item key="KR" text="대한민국" />
    <core:Item key="US" text="미국" />
    <core:Item key="JP" text="일본" />
    <core:Item key="DE" text="독일" />
  </items>
</Select>

// Controller
onCountryChange: function(oEvent) {
  const sKey = oEvent.getParameter("selectedItem").getKey();
  const sText = oEvent.getParameter("selectedItem").getText();
  console.log("선택된 국가:", sKey, sText);
  // sKey: "KR", sText: "대한민국"
}

Select는 반드시 items 목록 안에서만 선택이 가능합니다. 사용자가 임의 텍스트를 입력할 수 없습니다.

ComboBox 기본 구조

<ComboBox id="cityCombo"
          placeholder="도시를 선택하거나 입력하세요"
          value="{/selectedCity}"
          selectionChange="onCitySelect"
          change="onCityChange">
  <items>
    <core:ListItem key="SEOUL" text="서울" />
    <core:ListItem key="BUSAN" text="부산" />
    <core:ListItem key="INCHEON" text="인천" />
    <core:ListItem key="DAEGU" text="대구" />
  </items>
</ComboBox>

// Controller
// 목록에서 선택했을 때
onCitySelect: function(oEvent) {
  const oItem = oEvent.getParameter("selectedItem");
  if (oItem) {
    console.log("목록 선택:", oItem.getKey(), oItem.getText());
  }
},

// 입력 완료 (포커스 아웃 또는 Enter)
onCityChange: function(oEvent) {
  const sValue = oEvent.getParameter("value");
  console.log("현재 값:", sValue); // 직접 입력 또는 선택 텍스트
}

ComboBox에서 이벤트는 두 가지입니다. selectionChange는 목록 아이템을 선택했을 때, change는 직접 입력 후 포커스 아웃 또는 Enter 시 발생합니다.

ComboBox 직접 입력값 검증

ComboBox의 핵심 주의사항은 직접 입력값이 목록에 없어도 허용된다는 점입니다. 비즈니스 로직에 따라 이를 검증해야 할 수 있습니다.

onCityChange: function(oEvent) {
  const oCombo = oEvent.getSource();
  const sValue = oEvent.getParameter("value");
  const oSelectedItem = oCombo.getSelectedItem();

  if (sValue && !oSelectedItem) {
    // 직접 입력한 값이 목록에 없는 경우
    oCombo.setValueState(sap.ui.core.ValueState.Warning);
    oCombo.setValueStateText("목록에 없는 도시입니다. 확인 후 계속할 수 있습니다.");
  } else if (sValue && oSelectedItem) {
    // 목록에서 선택한 경우
    oCombo.setValueState(sap.ui.core.ValueState.None);
  } else {
    // 빈 값
    oCombo.setValueState(sap.ui.core.ValueState.Error);
    oCombo.setValueStateText("도시를 입력하거나 선택하세요.");
  }
}

바인딩으로 동적 Items 구성

두 컨트롤 모두 모델 바인딩으로 동적 목록을 구성할 수 있습니다.

// Model 설정
const oModel = new JSONModel({
  products: [
    { id: "P001", name: "노트북 15인치" },
    { id: "P002", name: "무선 키보드" },
    { id: "P003", name: "USB 허브" }
  ],
  selectedProduct: ""
});
this.getView().setModel(oModel);

<!-- Select with binding -->
<Select selectedKey="{/selectedProduct}">
  <items>
    <core:Item key="{id}" text="{name}"
               items="{path: '/products'}" />
  </items>
</Select>

<!-- ComboBox with binding -->
<ComboBox value="{/selectedProduct}">
  <items>
    <core:ListItem key="{id}" text="{name}"
                   items="{path: '/products'}" />
  </items>
</ComboBox>

두 컨트롤의 실전 선택 기준

Select: 국가, 통화, 상태 코드처럼 목록 외 값이 절대 허용되지 않는 경우
ComboBox: 검색어, 도시명처럼 목록에 없는 자유 입력도 가능해야 하는 경우
Select는 값 안정성이 높고 오입력 위험이 낮음
ComboBox는 입력 유연성이 높지만 검증 로직이 추가로 필요함

MultiComboBox — 여러 항목 선택

여러 항목을 동시에 선택해야 하면 sap.m.MultiComboBox를 사용합니다.

<MultiComboBox
    selectedKeys="{/selectedTags}"
    selectionChange="onTagChange">
  <items>
    <core:ListItem key="URGENT" text="긴급" />
    <core:ListItem key="REVIEW" text="검토 필요" />
    <core:ListItem key="BLOCKED" text="블로킹" />
    <core:ListItem key="DONE" text="완료" />
  </items>
</MultiComboBox>

onTagChange: function(oEvent) {
  const aKeys = this.byId("tagCombo").getSelectedKeys();
  console.log("선택된 태그:", aKeys); // ["URGENT", "REVIEW"]
}

공식 문서

각 컨트롤의 API는 SAP UI5 SDK에서 확인할 수 있습니다. sap.m.Select, sap.m.ComboBox, sap.m.MultiComboBox API 페이지에서 이벤트, 속성, 메서드를 상세히 확인하세요.

핵심 정리

Select는 목록 안에서만 선택, ComboBox는 목록 선택 또는 직접 입력. ComboBox를 사용할 때는 selectionChange와 change 이벤트를 구분하고, 직접 입력값에 대한 검증 로직을 항상 추가해야 합니다.

댓글 0