var과 remember과 mutableStateOf

이것저것 만져보다가 remember과 mutableStateOf가 계속 헷갈렸다.
검색해보니 글이 꽤 많았다. 나만 헷갈린건 아닌갑지....

val과 var

var variableName: DataType = value // Mutable(값 변경 O)
val constantName: DataType = value // Immutable (값 변경 X)

State...를 알기 전에 compose, composable, composition

문서에서 계속 세 단어가 번갈아가며 나와 먼저 정리한다.

• 컴포지션Composition: Jetpack Compose가 컴포저블을 실행할 때 빌드하는 UI에 대한 설명. 어떻게 UI가 구조하고 있는지 보여준다.
  
  위와 같이 컴포지션 상태에 있을 때 컴포저블이 그려진다.

• 컴포저블Composable: UI를 보여주는 함수들. 플러터의 위젯과 유사하다.

• 컴포즈Compose: 구성요소, 구성하다. 공식 문서에서는 Jetpack Compose를 줄여서 Compose로 부른다.

mutableStateOf...을 알기 전에 State

• State: 시간이 흐르며 바뀌는 값 전반
  - 블로그 포스트와 관련 댓글
  • 사용자가 클릭할 때 보여주는 애니메이션
  • 이미지에 올리는 스티커 등등...
• 컴포저블을 업데이트하는 방법은 같은 컴포저블을 (새로운) 파라미터와 함께 다시 호출하는 것 뿐! (이를 리컴포지션recomposition이라 한다)

remember

• remember: 객체를 저장하기 위한 API
• 처음으로 컴포저블이 빌딩될 때 계산된 값이 Composition 안에 저장되고, 리컴포지션을 할 때 저장한 값을 반환

mutableStateOf

• mutableStateOf: MutableState를 생성
  - MutableState: 컴포즈 런타인과 통합되는 observable 타입
• 값이 변경되면 해당 값을 읽는 모든 컴포저블 함수의 리컴포지션을 스케쥴함

둘은 재구성을 한 뒤에도 값을 의도대로 유지하기 위해 사용한다. 값이 업데이트되면 mutableStateOf을 통해 컴포저블들이 리컴포지션을 하게 만들고, remember로 업데이트된 값을 보장한다.

remember - mutableStateOf은 다음과 같이 선언할 수 있다.
해당 코드는 전부 똑같이 동작하며, 공식 문서는 읽기 쉬운 걸로 골라 사용하라고 한다.

val mutableState = remember { mutableStateOf(default) }
var value by remember { mutableStateOf(default) }
val (value, setValue) = remember { mutableStateOf(default) }

출처:

• https://developer.android.com/develop/ui/compose/state
• https://stackoverflow.com/questions/71529740/why-do-we-use-val-instead-of-var-for-remembering-mutable-state-in-jetpack-compos
• https://stackoverflow.com/questions/66169601/what-is-the-difference-between-remember-and-mutablestate-in-android-jetpack
• https://developer.android.com/develop/ui/compose/lifecycle#:~:text=As%20mentioned%20in%20the%20Managing%20state%20documentation%2C,of%20the%20composables%20that%20describe%20your%20UI.