Composable State

Composable 내부에서 어떤 변수가 변화했을때 Composable 을 재구성하게 할려면 그 변수가 State가 되야한다.

@Composable 안에서 값 → State 로 만드는 방식은 크게 4종류가 있다.

1. mutableStateOf() (내부 State 선언)

val counter = remember { mutableStateOf(0) }

• Composable 내부에서 새로운 State를 “직접 생성”
• UI 이벤트나 내부 로직으로 값을 변경하고 싶은 경우 사용
• Flow나 LiveData와는 관계 없음
• 이 State가 변경되면 그 컴포저블만 재구성

2. 외부 데이터 → State 로 변환 (AsState 계열)

2-1. collectAsState()

val spl by engine.spl.collectAsState()

• Flow 값을 State로 변환
• Flow emit 발생 → 재구성 발생
• 비동기 스트림 처리 시 가장 일반적인 방법

2.2 observeAsState() (LiveData)

val name by viewModel.name.observeAsState()

• LiveData 값을 State로 변환
• LiveData 변경 시 재구성 발생

2.3 produceState() (고급)

val state by produceState<Int>(initialValue = 0) {
    value = withContext(Dispatchers.IO) { heavyWork() }
}

• Coroutine 로직을 Composable 내부에서 실행하고 State 생산
• collectAsState()보다 일반화된 구조
• Flow, suspend 함수, callback 을 모두 State 로 바꿀 수 있음

2.4 rememberUpdatedState() (State snapshot 유지)

val currentValue by rememberUpdatedState(value)

• Composable 재구성 없이 최신 value를 callback 내부에서 가져오고 싶을 때
• 읽는 위치는 변하지 않지만 값만 업데이트되도록 유지

3. 기존 State 기반 → 새로운 파생 State 만들기 (derivedStateOf)

val isLoud by derivedStateOf { spl > 80 }

• 기존 State에서 계산된 값을 State로 만들고 싶을 때
• 계산 비용 최적화
• recomposition 최소화

4. Snapshot State List / Map

val items = remember { mutableStateListOf<String>() }
val map = remember { mutableStateMapOf<String, Int>() }

• List 또는 Map 자체가 State 로 동작
• 항목 추가/삭제/변경 → recomposition 발생
• UI Collection 레이아웃에 적합

---

방식	무엇을 하는가	대표 사용처
mutableStateOf()	내부에서 State 생성	버튼 상태, UI 내부 값
collectAsState()	Flow → State 변환	외부 스트림 데이터
observeAsState()	LiveData → State 변환	ViewModel LiveData
produceState()	Coroutine 또는 Callback → State	고급 비동기 데이터
rememberUpdatedState()	최신 값 snapshot 유지	callback 최적화
derivedStateOf()	기존 State → 계산된 State	성능 최적화
mutableStateListOf()	List 자체를 State로	목록 UI