LazyColumn의 items 안의 데이터가 갱신되지 않아요

LazyColumn의 items()는 아이템의 리스트를 인수로 전달받습니다.

아이템이 변경되면 당연히 items() 내부의 코드 블럭은 재구성되지만,

해당 코드 블럭 내부에서 remember()을 통해 값을 보존할 경우 재구성되지 않아요.

 

따라서 값을 보존할 필요가 없다면 remember을 없애고,

보존해야 한다면 remember()을 통해 초기화한 후, LaunchedEffect를 통해 데이터를 직접 업데이트해야 합니다.

 

Ex. (잘못된 예시)

아래와 같이 작성된 코드에서는

화면을 스크롤해서 LazyColumn의 index가 0에서 1으로 바뀌었을 때

numberOfSubscibers는 200만에서 50만으로 갱신되지만,

nickname은 "안산83"에서 "양말 아저씨"로 갱신되지 않습니다

 

val youtubers = listOf(
  Youtuber("침착맨", mutableListOf(...), "안산83"),
  Youtuber("주펄", mutableListOf(...), "양말 아저씨")
)

LazyColumn(...) {
  items(youtubers.size) { index ->
    val youtuber = youtubers[index]
    val numberOfSubscribers = youtuber.subscribers.size             // 갱신 O
    var nickname by remember { mutableStateOf(youtuber.nickname) }  // 갱신 X
  }
}

data class Youtuber(
  val name: String,
  var subscribers: MutableList<String>,
  var nickname: String
)

 

Ex. (제대로 된 예시)

유튜버의 별명이 바뀌도록 하려면 하려면 LaunchedEffect를 통해 직접 업데이트 해주어야 합니다.

val youtubers = listOf(
  Youtuber("침착맨", mutableListOf(...), "안산83"),
  Youtuber("주펄", mutableListOf(...), "양말 아저씨")
)

LazyColumn(...) {
  items(youtubers.size) { index ->
    val youtuber = youtubers[index]
    val numberOfSubscribers = youtuber.subscribers.size             // 갱신 O
    var nickname by remember { mutableStateOf(youtuber.nickname) }  // 갱신 X
    
    LaunchedEffect(key1 = youtuber) {
      nickname = youtuber.nickname // 직접 업데이트
    }
  }
}

data class Youtuber(
  val name: String,
  var subscribers: MutableList<String>,
  var nickname: String
)