Compose UI8 Compose UI - Recomposition 최소화, derivedStateOf 활용 Compose UI - Recomposition 최소화, derivedStateOf 활용1. Recomposition 최소화하기1.1. Recomposition이란?Compose에서 특정 상태가 변경될 때 영향을 받는 Composable 함수가 다시 실행되는 과정을 Recomposition이라고 합니다.1.2. Recomposition 최소화 전략remember 사용: 불필요한 상태 변화를 방지Stable한 데이터 구조 활용: 불필요한 변경 감지를 피하기 위해 Immutable 데이터 사용key를 활용한 리스트 최적화: LazyColumn에서 key를 명확히 지정하여 성능 최적화@Composablefun OptimizedText(text: String) { val rememberedText = re.. 2025. 2. 15. Compose UI - 테마와 스타일링 – Material3, 다크 모드 적용 Compose UI - 테마와 스타일링 – Material3, 다크 모드 적용1. Material3 적용하기Compose에서는 Material3 라이브러리를 활용하여 최신 디자인 시스템을 적용할 수 있습니다.1.1. Material3 의존성 추가implementation("androidx.compose.material3:material3:1.0.0")1.2. Material3 테마 설정@Composablefun MyAppTheme(content: @Composable () -> Unit) { val darkTheme = isSystemInDarkTheme() val colorScheme = if (darkTheme) darkColorScheme() else lightColorScheme() .. 2025. 2. 15. Compose UI – Navigation Compose 활용 Compose UI – Navigation Compose 활용Jetpack Compose에서 화면 간 이동을 간편하게 관리할 수 있도록 제공되는 Navigation Compose 라이브러리를 활용하면 간결하고 직관적인 네비게이션을 구현할 수 있습니다. 이번 글에서는 NavHost, NavController, composable 등을 활용하여 네비게이션을 구성하는 방법을 살펴보겠습니다.1. Navigation Compose 기본 개념Compose에서는 NavController를 사용하여 화면 전환을 관리합니다. 네비게이션 그래프는 NavHost를 사용하여 구성하며, 각 화면은 composable을 통해 정의됩니다.기본 구성 예제@Composablefun MyAppNavHost(navController: N.. 2025. 2. 15. Compose UI – animate*AsState, AnimatedVisibility, Transition 등 Compose UI – animate*AsState, AnimatedVisibility, Transition 등Jetpack Compose에서는 간단한 상태 기반 애니메이션부터 복잡한 트랜지션까지 다양한 애니메이션 API를 제공합니다. 이번 글에서는 대표적인 애니메이션 API인 animate*AsState, AnimatedVisibility, Transition 등을 활용하는 방법을 알아보겠습니다.1. animate*AsState – 상태 기반 애니메이션animate*AsState는 값이 변경될 때 부드럽게 변하는 애니메이션을 적용할 수 있는 API입니다.예제: 크기 애니메이션 적용@Composablefun SizeAnimationExample() { var expanded by remember {.. 2025. 2. 15. Compose UI – LazyColumn, LazyRow, Modifier 조합 Compose UI – LazyColumn, LazyRow, Modifier 조합Jetpack Compose에서 레이아웃을 구성하는 방법과 리스트를 효율적으로 렌더링하는 LazyColumn, LazyRow의 활용법을 알아보겠습니다. 또한 Modifier를 조합하여 더욱 유연한 UI를 만드는 방법도 다룹니다.1. LazyColumn – 세로 리스트 구현LazyColumn은 수직 방향의 리스트를 효율적으로 렌더링할 때 사용됩니다.예제: LazyColumn 활용@Composablefun LazyColumnExample() { LazyColumn { items(50) { index -> Text(text = "Item #$index", modifier = Modifier.p.. 2025. 2. 15. Compose UI - remember, State, ViewModel 활용법 Compose UI - remember, State, ViewModel 활용법Jetpack Compose에서 UI는 상태(State)를 기반으로 구성됩니다. 이번 글에서는 Compose에서 상태를 관리하는 방법인 remember, State, 그리고 ViewModel을 활용하는 방법을 알아보겠습니다.1. remember – 상태 유지하기remember는 Composable 함수 내에서 상태를 유지하도록 도와줍니다.예제: remember를 활용한 상태 저장@Composablefun RememberExample() { var counter by remember { mutableStateOf(0) } Column(horizontalAlignment = Alignment.CenterHorizo.. 2025. 2. 15. 이전 1 2 다음
