[TIL] 🌼24/05/08🌼#State Delegates vs State Destructuring

[TIL] 🌼24/05/08🌼#State Delegates vs State Destructuring

State Delegates vs State Destructuring

📌도움될만한 지난 블로그 포스팅

• [Jetpack Compose] 3. Architecture and state(2) #Side Effects #Saver

• 폴더의 이름과 색상을 입력받는 다이얼로그를 구현하는 중, MutableState 선언 방식에 따라 동작에 차이가 있는 것을 발견했다!

• 폴더 이름을 입력받은 경우(isNotBlank)에만 폴더를 추가하는 버튼 상테가 enable 되도록 입력 유효성 검사를 구현하고자 함
  -> 입력받은 폴더 이름의 상태를 저장하는 MutableState 인 folderName 선언
  -> folderName의 값이 입력되었는지 여부를 저장하는 nameValid를 derivedStateOf side-effect를 이용해 선언

• 이때 folderName을 delegates를 사용해 선언한 경우 nameValid 값이 정상적으로 업데이트 되지만,
  구조 분해를 사용해 선언한 경우 nameValid 값이 업데이트되지 않는다!

@Composable
fun AddFolderDialog(
    modifier: Modifier = Modifier,
    onDismissRequest: () -> Unit,
    addFolder: (String, String) -> Unit
) {
    // delegates
    var folderName by remember { mutableStateOf("") }
    val setFolderName = {it:String -> folderName = it}

    // destructing declarations
    //val (folderName, setFolderName) = remember { mutableStateOf("") }

    val (folderColorHex, setFolderColorHex) = remember { mutableStateOf(FolderColor.COLOR1.colorHex) }

    val nameValid by remember { derivedStateOf { folderName.isNotBlank() } }

    Dialog(
        onDismissRequest = onDismissRequest,
    ) {
        Card(
            modifier = modifier.height(IntrinsicSize.Min),
            shape = RoundedCornerShape(16.dp)
        ) {
            Column(
                modifier = modifier.padding(16.dp),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
            	// Dialog title
                Text(
                    modifier = modifier.fillMaxWidth(),
                    textAlign = TextAlign.Center,
                    text = stringResource(R.string.add_folder_title),
                )
                // 폴더 이름을 입력받는 Composable
                // 폴더 이름 입력 값 = folderName
                FolderNameInput(
                    modifier = modifier.padding(top = 16.dp),
                    value = folderName,
                    onValueChange = setFolderName
                )
                // 폴더 색상을 입력받는 Composable
                FolderColorSelect(
                    modifier = modifier.padding(top = 16.dp),
                    colorHexes = FolderColor.entries.map { it.colorHex }.drop(1),
                    selectedColorHex = folderColorHex,
                    onColorSelect = setFolderColorHex
                )
                // Dialog dismiss 버튼/confirm 버튼 Composable
                // confirm 버튼 enabel 여부 = nameValid
                DialogButtons(
                    modifier = modifier.padding(top = 16.dp),
                    dismissButtonLabelId = R.string.add_folder_negative,
                    onDismissRequest = onDismissRequest,
                    confirmButtonLabelId = R.string.add_folder_positive,
                    enableConfirmButton = nameValid,
                    onConfirmRequest = { addFolder(folderName, folderColorHex) }
                )
            }
        }
    }
}

📌참고자료

• You might be creating your states wrong! — Jetpack Compose
• 코틀린(Kotlin) - 구조 분해 선언과 component 함수

• 이와 같이 동작에 차이가 발생한 이유는 MutableState를 선언할 때 delegates를 이용하는 것과 구조 분해를 이용하는 것에 차이가 있기 때문!

• Compose는 내부적으로 state에 대한 모든 read/write을 옵저빙한다!
  -> 이때, Compose는 snapshot system을 사용함
• MutableState에 write을 하는 경우, state의 snapshot에 영향을 줌
  -> write 전 snapshot과 후 snapshot이 다른 경우, snapshot conflict를 해결하기 위해 recomposition 트리거
  -> 이때 최근의 snapshot을 바로 state의 새로운 값으로 설정하지 X
  다음 recomposition cycle에서 state의 값으로 사용할 candidate value로만 설정
  -> recomposition이 실제로 수행될 때 candidate value를 state의 새로운 값으로 설정
• 예.
  (composition) state = 0, snapshot = 0
  -> state = 0, snapshot = 1 -> trigger recomposition, candidate value = 1
  -> state = 0, snapshot = 2 -> 〃, candidate value = 2
  (recomposition) state = 2, snapshot = 2

• delegates로 MutableState을 선언하여 state의 값을 읽는 경우
  -> MutableState.value operation에 delegate
  -> state의 실제 값이 아닌 candidate value 읽어옴

• 구조분해로 MutableState을 선언하여 state의 값을 읽는 경우
  -> MutableState.value operation 불리지 X, component1을 설정할 때 한 번만 불림
  -> candidate value가 아닌, state의 실제 값 읽어옴
  -> recomposition이 일어나야, re-initialize된 최신의 state 값을 읽어올 수 있다