Single select button 구현 방식에 대한 생각

[cometj03]

Single select button이란

• 라디오 버튼이나 filter chip(핸디에서는 suggestion chip)과 같이 여러 개 중 1개만 선택될 수 있는 버튼
• 컴포넌트를 사용하는 개발자가 직접 단일 선택 로직을 구현하는 방식과, RadioGroup, ChipGroup처럼 group 컴포넌트를 제공하여 같은 그룹 내에서의 컴포넌트에 대해 정해진 효과를 부여하는 방식이 있음
• 또는 HTML의 input radio 방식처럼 같은 name끼리를 그룹으로 취급하는 방식도 있을 것 같음.

group 컴포넌트를 제공하지 않고 직접 구현하도록 두는 방식

(기존 compose material의 방식과 동일)

• 컴포넌트 구현이 단순해진다.
• 해당 컴포넌트로 UI를 구성할 때 추가적인 로직이 들어가므로 가독성이 조금 떨어질 수 있다.
• 또한 개발자가 로직을 구현할 때 실수하는 등의 이유로 디자인 시스템이 원하는 동작(단일 선택)이 나오지 않을 가능성도 있다.

group 컴포넌트를 제공하는 방식

• 로직을 드러내지 않아도 되므로 UI 코드가 간결해질 수 있다.
• 컴포넌트 구현이 복잡해질 수 있고, group 컴포넌트까지 관리해야 한다.

[cometj03]

가독성이 얼마나 차이가 날까

Group 컴포넌트가 없는 경우

var selectedItem: String? by remember { mutableStateOf(null) }
val items = listOf("radio 1", "radio 2", "radio 3")

LaunchedEffect(selectedItem) {
  println(selectedItem)
}

Column {
  items.forEach { item ->
    RadioButton(
      label = item,
      selected = (selectedItem == item),
      onClick = { selectedItem = item }
    )
  }
}

Group 컴포넌트가 있는 경우

val radioState = rememberSingleSelectButtonState()
val items = listOf("radio 1", "radio 2", "radio 3")

LaunchedEffect(radioState.selectedItem) {
  println(radioState.selectedItem)
}

RadioGroup(state = radioState) {
  items.forEach { item ->
    RadioButton(label = item, radioId = item) // 선택된 버튼의 radioId가 selectedItem으로 지정됨
  }
}

음.. 크게 차이나지 않는 것 같긴 하다

우선 Group 컴포넌트는 만들지 않고, 이후에 필요하면 추가하는 것으로 해야 할 것 같음