[Compose] Checkbox

Checkbox 만들어보기

    val (getter, setter) = remember {
        mutableStateOf(false)
    }
    Row(verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.padding(horizontal = 20.dp)
    ) {
        Checkbox(checked = getter, onCheckedChange = setter)
        Text(text = "당신은 개발자입니까?", modifier = Modifier.clickable { setter(!getter) })
    }

왜 remember를 쓰나요?

• 컴포저블 함수의 재구성을 효율적으로 관리하기 위해 상태를 저장할 때 사용됩니다. Compose의 재구성(recomposition) 과정에서 값이 초기화되지 않도록, 특정 상태를 메모리에 유지시켜주는 역할을 합니다.

• Compose에서는 화면이 업데이트될 때 컴포저블 함수가 다시 호출됩니다. 이때, 함수 내부의 로컬 변수는 기본적으로 매번 초기화됩니다. 하지만 우리가 원하는 건, 재구성 중에도 특정 값(상태)을 유지하는 것이죠. remember는 이를 가능하게 해줍니다.

• remember를 사용하지 않으면?

  • 상태가 유지되지 않아 매번 초기화됩니다.
  • 재구성 시 UI의 상태가 의도치 않게 리셋됩니다.

구조 분해(비구조화)를 쓴 이유는?

• val (getter, setter) = remember { mutableStateOf(false) }
• mutableStateOf를 타고 들어가면 다음과 같이 MutableState 인터페이스에 정의된 구성 함수(component functions)가 있다. component1()과 component2() 연산자가 정의되어 있는데, component1()은 상태 값을 반환(getter 역할), component2()는 상태 값을 변경하는 함수 반환(setter 역할)한다.
  
• 즉, getter와 setter로 나눠서 작성한 이유는 Compose에서는 상태를 읽고 업데이트하는 동작이 많습니다. 구조 분해를 통해 상태 관리 코드를 더 명확하고 직관적으로 작성할 수 있습니다
  • getter: 상태를 읽는 데 사용
  • setter: 상태를 변경하는 데 사용
• 구조 분해 없이 작성하면 코드가 더 장황해질 수 있다.(예제를 보자)

        val checked = remember { mutableStateOf(false) }
        
        Checkbox(
            checked = checked.value,
            onCheckedChange = {
                checked.value = !checked.value
            }
        )