[ Kotlin ] 안드로이드 Compose - State, ViewModel

compose flow

 

developers compose thumbnail

진짜 정신과 시간의 방에서 지낸 며칠간
드디어 첫 번째 Compose 가이드를 끝냈다
(걍 진짜 뛰쳐나가고 싶은 적 2번..)

compose progress

암튼 플러터 기초에서도 배웠던

Stateless
Stateful
+ViewModel(동적 값 변동)

이렇게 배웠는데
구글 codelab은 어떻게 예시 어플도 이렇게 그럴싸하게 생긴건지 ㅋㅋㅋ
암튼

231220 완료 후 231221에 복습 한 번 더 하며 적을 예정

---

231223 시작!

0. 키오스크에서 메뉴를 추가하면 총 합 금액이 계산돼서 변동되는 것과 같은 원리. 또한 메뉴가 개많으면, 우리 RecyclerView처럼 뷰가 보이는 것(LazyColumn)

Live Data, Observe같은 형태로 기존에는 만들었던거 같은데,, 너무 gpt에 의존하다보니까 제대로 공부못했음. 암튼

해당 CodeLab 에서 공부한 내용 정리.

1. 어떤 이벤트가 실행됐을 때, 값이 변동되는 원리

"Compose에서 상태 관리는 상태와 이벤트가 서로 상호작용하는 방식을 이해하는 것이 핵심입니다.
Compose의 State 및 MutableState 유형을 사용하여 Compose에서 상태를 관찰할 수 있도록 합니다."
라는 설명

val count by remember { mutableStateOf(0) }
// 이런식으로 변동가능한 형식으로 선언해 놓으면 어떤 이벤트가 생겼을 때 변동이 된다고 봄

가정) 버튼을 클릭했을 때 1 씩 올라가게 해 놓음. 근데 화면이 전환되면서 다시 렌더링 될 때, 6이었던 상태가 다시 0이 됨.
이럴 때

val count by rememberSaveable { mutableStateOf(0) }

호이스팅

// 1번
@Composable
fun StatelessCounter(count: Int, onIncrement: () -> Unit, modifier: Modifier = Modifier) {
   Column(modifier = modifier.padding(16.dp)) {
       if (count > 0) {
           Text("You've had $count glasses.")
       }
       Button(onClick = onIncrement, Modifier.padding(top = 8.dp), enabled = count < 10) {
           Text("Add one")
       }
   }
}

// 2번
@Composable
fun StatefulCounter(modifier: Modifier = Modifier) {
   var count by rememberSaveable { mutableStateOf(0) }
   StatelessCounter(count, { count++ }, modifier)
}

// 3번
@Composable
fun WellnessScreen(modifier: Modifier = Modifier) {
   StatefulCounter(modifier)
}

공부하면서 느낀 것

1번에서 짜놓은 로직에서 count(숫자 상태)를 안 넣음.
보통은 상태를 정의하는 스니펫만 따로 빼서 stateful로 만들어놓는다?

그래서 정적인 코드는 놔두고, 동적인 것만 인자로 받아서 넣는 형식이라고 이해(실제로 분리하는게 좋을 듯 싶음) 왜냐면 실무에서 Composable이 개 많을텐데 코드까지 길다? 굉장히 설계가 복잡하질 듯 했음.

---

2. ViewModel 로 LazyColumn 만들어서 관리

• adapter, RecyclerView를 사용하는 것과 비슷

  

  avd result

//1번
@Composable
fun WellnessTaskItem(
    taskName: String,
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    onClose: () -> Unit,
    modifier: Modifier = Modifier
) {
    Row(
        modifier = modifier, verticalAlignment = Alignment.CenterVertically
    ) {
        Text(
            modifier = Modifier
                .weight(1f)
                .padding(start = 16.dp),
            text = taskName
        )
        Checkbox(
            checked = checked,
            onCheckedChange = onCheckedChange
        )
        IconButton(onClick = onClose) {
            Icon(Icons.Filled.Close, contentDescription = "Close")
        }
    }
}

// 2번
@Composable
fun WellnessTaskItem(taskName: String, modifier: Modifier = Modifier) {
   var checkedState by remember { mutableStateOf(false) }

   WellnessTaskItem(
       taskName = taskName,
       checked = checkedState,
       onCheckedChange = { newValue -> checkedState = newValue },
       onClose = {}, // we will implement this later!
       modifier = modifier,
   )
}

1번 = stateless 인 그 column 한 개를 수정자 등을 통해 구현.
2번 = 각각의 item들을 stateful로 받아서 체크박스, 하나의 column 삭제와 같은 기능을 받을 수 있게 하는 컴포저블

공부하면서 느낀 것 - 나중에 ViewModel사용해서 state관리할 때 구현 순서

0) 내가 다룰 상태의 class를 정의해놓기(Boolean 등)
1) 먼저 1 - 3번 코드인 WellnessScreen에다가 내가 출력한 리스트를 만들어놓음 (toMutableStateList) 로 해야 함
2) 그리고 해당 LazyColumn이 들어가 있을 ViewModel을 만듦.

• 이유: 뷰모델에다가 안넣어놓으면 삭제하고 했을 때, 오류 남(오류는 item의 삭제 같은 부분을 저장할 곳이 없다는 것)

---

3) ViewModel에서 아까 적어놨던 stateful Composable인 WellnessScreen과 연결하기. (내부 값들의 변경하는 과정을 ViewModel을 import해서 check와 close같은 임의의 method를 관리하는 것.

---

내가 이해한 게 맞나..?
일단 codelab에서는 먼저 stateful의 원리를 설명하고 viewmodel을 활용하는 순서로 진행되서 쓰고 수정하고 하면서 이해하기 어려웠는데 이거 제대로 써보려면 개인프로젝트 무적권 해봐야할듯,,

암튼 viewmodel을 통해서 stateful과 stateless를 분리해서 연결? 하는 형태로 봐야할 듯 싶다!

오늘의 결론

얼른 과정 끝내고 개인프로젝트 시작하자!