24.02.16 Compose State

KSang·2024년 2월 17일

State TIL compose

TIL

목록 보기

62/101

State

이번엔 컴포즈에서 중요한 state에 대해 다뤄 보려고 한다.

컴포즈에서 State는 화면의 UI상태를 관리하는데 사용되는 개념이다.

값의 변경을 추적하고, 값이 변경될 때마다 관련 UI를 자동으로 다시 구성 하는데 사용된다.

라이브 데이터나, Flow가 있는데 굳이 이게 필요할까? 라는 의문이 들었는데,

컴포즈의 특성을 생각하면 이해가된다.

컴포즈는 선언적 UI프레임 워크로 상태변경에 따라 UI를 자동으로 업데이트하는데 이과정을 리컴포지션 이라고 한다.

왜? 화면을 다시 그리는 걸까? 비효율 적인거 아냐? 라고 생각이 들 수 있는데,

리컴포지션은 Compose의 핵심 특징이다.
상태 변경에 따라 UI를 자동으로 업데이트해 UI코드를 더 간결하고 이해하기 쉽게 만든다.

그리고 처음부터 다시그리는게 아닌 최적화를 통해 변경된 부분만 다시 그리게 된다.

왜 이해하기 쉽고 간결한지 예를 들면 우리가 리사이클러뷰등 값이 변경 되었을때 갱신하는 로직이 필요한데, 그런게 필요가 없어진다!!

이번에 다양한 State를 사용하는 방법과 그 특징들을 다뤄 보려고 한다.

기본

    val text1 = remember {
        mutableStateOf("Hello World")
    }
    
    text1.value = "A"

가장 기본적인 뼈대가 되는 State이다.

타입은 MutabeState 으로 value를 사용해서 값을 변경한다.

구조분해

    val (text, setText) = remember {
        mutableStateOf("Hello World")
    }
    
    TextField(value = text, onValueChange = setText)

저번에 썼던 구조 분해 방법이다.

주로 텍스트 필드를 만들때 사용되는데, 타입은 여기선 text가 String, setText가 (String) -> Unit으로 나온다

그래서 텍스트 필드안에서 값을 변경했을시, setText를 이용해 세터 게터를 설정한다.

by

    var text2 by remember {
        mutableStateOf("Hello World")
    }

by를 사용하게되면 text2의 값을 변경할때 , 델리게이티드 프로퍼티 기능을 이용해 세터랑 게터를 재정의한다.

그렇기 때문에 타입은 String이며 값을 변경할때

    text2 = "Hi"

처럼 간단하게 설정할 수 있다.

주로 간단한 작업을 할때 사용되며, 간편하게 코드 작성시에 쓰인다고한다.

viewModel

class MainViewModel: ViewModel() {
    private val _value = mutableStateOf("Hello World")
    val value: State<String> = _value

    fun updateValue(value: String) {
        _value.value = value
    }
}
  ...
  
                Text(
                    text = viewModel.value.value,
                    fontSize = 30.sp,
                )

뷰모델이다.

대부분은 뷰모델에서 처리하게 된다고 보면 된다.

뷰모델 같은 경우 기존의 LiveData나 Flow를 디펜댄시를 추가해서 구현 할 수도 있는데,

라이브 데이터 같은 경우

    //liveData
    implementation("androidx.compose.runtime:runtime-livedata:1.6.1")

그래들에 디펜댄시를 추가해주면

class MainViewModel: ViewModel() {

    private val _liveData = MutableLiveData<String>()
    val liveData: LiveData<String> get() = _liveData 
}
  
val text3: State<String> = viewModel.liveData.observeAsState("Hello World")