13. Kotlin-동적 렌더링

네, Jetpack Compose에서 동적인 렌더링을 하는 다양한 예시를 살펴보겠습니다.

1. 데이터 바인딩
   • 상태(State) 객체를 사용하여 UI와 데이터를 바인딩할 수 있습니다.
   • @Composable fun CounterComposable() { var count by remember { mutableStateOf(0) } Column { Text("Count: $count") Button(onClick = { count++ }) { Text("Increment") } } }
   • 여기서 count 상태 변수의 값이 변경되면 Text에 동적으로 반영됩니다.
2. 조건부 렌더링
   • 조건에 따라 다른 UI 요소를 렌더링할 수 있습니다.

     @Composable
     fun LoadingComposable(isLoading: Boolean) {
       if (isLoading) {
           CircularProgressIndicator()
       } else {
           Text("Content loaded")
       }
     }

   • isLoading 조건에 따라 CircularProgressIndicator나 Text가 렌더링됩니다.
3. 목록 렌더링
   • LazyColumn과 items 함수를 사용하여 동적인 목록을 렌더링할 수 있습니다.

     @Composable
     fun TodoListComposable(todos: List<Todo>) {
       LazyColumn {
           items(todos) { todo ->
               TodoItemComposable(todo)
           }
       }
     }

   • todos 목록의 길이나 내용이 변경되면 자동으로 업데이트됩니다.
4. 애니메이션
   • AnimatedVisibility와 animate*AsState 함수를 사용하여 애니메이션 효과를 줄 수 있습니다.
   • @Composable fun AnimatedContentComposable(showContent: Boolean) { val visible by animateValueAsState(showContent) AnimatedVisibility(visible = visible) { Text("Dynamic content") } }
   • showContent 값이 변경되면 Text가 애니메이션 효과와 함께 나타나거나 사라집니다.
5. 사용자 입력 처리
   • TextField와 remember 함수를 사용하여 사용자 입력을 처리할 수 있습니다.
   • @Composable fun InputComposable() { var text by remember { mutableStateOf("") } TextField( value = text, onValueChange = { text = it }, label = { Text("Enter text") } ) Text("You entered: $text") }
   • 사용자가 TextField에 입력한 값이 text 상태 변수에 저장되고, 이를 Text에 동적으로 렌더링합니다.

이렇게 Jetpack Compose에서는 상태 객체, 조건부 렌더링, 목록 렌더링, 애니메이션, 사용자 입력 처리 등의 기능을 통해 UI를 동적으로 렌더링할 수 있습니다. 데이터의 변경에 따라 UI가 자동으로 업데이트되므로 반응성 있는 사용자 인터페이스를 구현할 수 있습니다.