Android(Kotlin), Composable 관찰자를 사용하여 UI 상태 관리하기

0. 개요

LiveData, MutableLiveData, obeservseAsState() 등을 사용하면서 Compose를 사용하여 구현한 UI에서 여러 상태를 관리할 수 있다. 이를 Composable 관찰자라고 부르며, 어떻게 구현되며 사용되는지 궁금해졋다. 같이 알아봅시다.

1. Composable 관찰자란?

1) Jetpack Compoase

• Kotlin의 현대적인 UI 툴킷, UI를 선언적 방식으로 구축하도록 설계
• UI의 상태를 직접적으로 반영하는 코드로 UI를 작성하는 것을 의미
• 즉, 상태가 변경될 때ㅑ마다 UI를 자동으로 업데이트

2) Composable의 주요 개념

• @Composable 어노테이션: 함수를 composable로 표시
• State: 상태관리를 위한 'state' 및 'MutableState' 타입을 제공
  - State: 읽기 전용 상태
  • MutableStae: 변경 가능 상태
• Recomposition: Composable의 일부가 상태에 의존할 때, 해당 상태가 변경되면 Composable은 자동으로 다시 그려짐(recompose). -> UI가 항상 최신상태
• observeAsState: 이 확장함수는 'LiveData'나 'State'와 같은 관찰 가능한 데이터를 Compose 'state' 객체로 반환. 이를 사용하면 Composable 내에서 관찰 가능한 데이터의 변경을 감지

3) Composable 관찰자란?

• UI를 상태와 연결하고, 상태의 변화에 따라 UI를 자동으로 업데이트하는 선언적 방식의 프로그래밍을 가능하게하는 관찰자

2. 이해를 돕기위한 예제

1) ViewModel

@HiltViewModel
class ExampleViewModel @Inject constructor() : ViewModel() {
    // MutableLiveData를 사용하여 내부에서 변경 가능한 데이터를 정의합니다.
    private val _counter = MutableLiveData<Int>(0)
    
    // 외부에서는 읽기 전용 LiveData로 데이터에 접근하게 됩니다.
    val counter: LiveData<Int> get() = _counter

    fun increaseCounter() {
        _counter.value = (_counter.value ?: 0) + 1
    }
}

2) Jetpack Compose UI

@Composable
fun CounterScreen(viewModel: ExampleViewModel) {
    // observeAsState를 사용하여 LiveData를 Composable UI의 상태로 변환합니다.
    val count by viewModel.counter.observeAsState(0)

    Column(horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center, modifier = Modifier.fillMaxSize()) {
        Text(text = "Count: $count", fontSize = 24.sp, fontWeight = FontWeight.Bold)

        Spacer(modifier = Modifier.height(16.dp))

        Button(onClick = { viewModel.increaseCounter() }) {
            Text(text = "Increase Counter")
        }
    }
}

3) MainActivity(프래그먼트나 다른 위치에도 똑같이 적용 가능

@AndroidEntryPoint
class MainActivity : AppCompatActivity() {
    private val viewModel: ExampleViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CounterScreen(viewModel = viewModel)
        }
    }
}

3. 결론

• Composable 관찰자는 Android의 Jetpack Compose를 사용하여 UI를 작성할 경우 데이터의 상태를 실시간으로 관찰하여 UI의 내용을 통제할 수 있게하는 강력한 도구이다.
• Composable 관찰자를 사용함으로서 실시간으로 클라이언트가 입력한 데이터를 화면에 출력하거나 송출할 수 있고, Api를 호출하여 가져온 데이터를 관찰하며 UI와 상호작용할 수 있다.