Kong-droid

[Compose] Rendering

Compose는 크게 보자면 Data를 UI로 변환하는 과정인데, 아래의 과정들을 거칩니다 Composition : what  (무엇을 그릴지)layout : where (UI를 어디에 배치할지)Drawing: How (어떻게 UI를 그릴지)  Compositioncode를 UI Tree화 시킵니다 즉, 데이터와 UI 요소 간의 관계가 정의됩니다 Layout아래의 과정으로 UI 트리를 탐색을 하면서, 각 레이아웃을 측정하고 배치됩니다하위 요소 측정: 노드가 하위 요소(있는 경우)를 측정자체 크기 결정: 이러한 측정치를 기반으로 노드가 자체 크기를 결정하위 요소 배치: 각 하위 노드는 노드의 자체 위치를 기준으로 배치이 때 , 모든 노드는 단 한번씩만 방문하기 때문에 Compose 런타임은 모든 노드를..

⭐️ Smart Recomposition- composition 함수에서 사용되는 데이터가 변경된 데이터의 함수만 재호출 즉 일부분의 ui만 업데이트 - 성능 최적화   Compose의 Lifecycle - composition : 컴포저블 함수가 호출되어 UI 트리를 구성하는 과정으로 여러 개의 컴포저블이 결합되어 최종 UI 생성, 즉 초기 UI를 설정하는 단계- recomposition : 상태가 변경되어 UI가 다시 그려지는 과정, 상태 변화를 감지하고 영향을 받는 부분만 업데이트 (최적화 하는 것이 제일 중요)- disposal : composable이 소멸, 리소스 해제  recomposition의 최적화를 위해서 생명주기를 아는 것이 중요합니다 만약 아래와 같이 코드를 사용한다고 하면, @Co..

라이브러리 추가가 필요합니다 [libs.version.toml][versions]//...navigationVersion = "2.8.5"[libraries]//...androidx-navigation-compose = { group = "androidx.navigation", name = "navigation-compose", version.ref = "navigationVersion" } [build.gradle]implementation(libs.androidx.navigation.compose) Navigation은 화면 간 전환을 관리하는 중요한 요소입니다예제를 통해 각각 필요한 개념을 익혀보겠습니다   NavController- 현재 Navigation 상태 관리, 화면 간 이동을 처리- 각 ..

프로젝트를 생성하면 기본으로 프로젝트명Theme가 생성되어있습니다 class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ComposeTestTheme { } } }} ComposeTestTheme으로 이동하면 아래와 같이 선언되어있습니다 package com.kong.composetest.ui.themeimport android.app.Activityimport android.os.Buildimport android..

우선 라이브러리를 추가합니다[libs.version.toml][versions]//...viewModelVersion = "2.8.7"composeVersion = "1.7.2" // 현재 사용 중인 compose 버전[libraries]//...androidx-viewmodel-compose = { group = "androidx.lifecycle", name = "lifecycle-viewmodel-compose", version.ref="viewModelVersion"}androidx-livedata-compose = { group = "androidx.compose.runtime", name = "runtime-livedata", version.ref = "composeVersion" } [bui..

SideEffect- Composable 함수는 입력 값이 변경될 때마다 재실행되며, UI를 업데이트. 하지만, UI 업데이트와 직접적인 관련이 없고, Composable 함수의 재실행 시마다 반복적으로 실행될 필요가 없는 작업이 side-effect- 즉, 상태 값과 직접적으로 관련 없는 UI 작업들이 Composable 함수에서 불필요하게 재호출되는 것을 방지하기 위해 사용  LaunchedEffect : Composable 안에서 suspend func 실행- 하나 이상의 key를 paramater로 받아야 한다 (ex. error.value) - key가 바뀌지 않는 이상 같은 코루틴을 사용하고, key가 바뀌면 기존 코루틴을 취소하고 다시 코루틴을 만들어 실행fun test( flavors..

AnimatedVisibility- visibility에 Animated 적용- Transition이 enter, exit 따로 나눠져있다- FadeTransition:  나타날 때, 사라질 때 투명도를 조절해 부드럽게 변하는 효과- SlideTransition:  화면의 한 쪽에서 다른 쪽으로 이동하며 나타나고 사라지는 효과- ExpandTransition:  펼쳐지거나 축소되며 나타나고 사라지는 효과, 주로 패널이나 리스트 항목에 사용- ScaleTransition:  크기를 확대하거나 축소하면서 나타나거나 사라지는 효과 이런 식으로 사용 ..! textVisible은 아래와 같이 선언되어있다 var textVisible by remember { mutableStateOf(false) } Animat..

SnackbarHost - Snackbar는 직접 쓰지 않고 SnackbarHost를 사용해야한다  -> SnackbarHostState를 사용하여 Snackbar의 상태를 관리 @Composablefun SnackBarTest() { var counter by remember { mutableStateOf(0) } val snackbarHostState = remember { SnackbarHostState() } val coroutineScope = rememberCoroutineScope() Scaffold(snackbarHost = { SnackbarHost(snackbarHostState) },) { padding -> Button(onClick = { ..

Composition- composable을 호출해 만들어지는 것으로 ui를 기술하는 composable의 트리 구조   Composition- composable fun을 실행하고 ui를 표시Layout- ui를 배치Draw- ui를 랜더링 즉, 캔버스에 그림  ⭐️ Recomposition- state가 바뀌었을 때 변경된 state를 반영하기 위해 Composition 업데이트- ui를 변경하기 위해선 state가 변경되어야 함 Recomposition을 조절하려면 ? @Stable이 없어도 compose complier가 안정적으로 간주하는 타입 - 모든 Primitive 타입, 문자열, 모든 함수 타입 위의 타입들이 아니라면 안정적이라고 간주할 수 없을 때 (ex. 리스트, 맵, 사용자 정의 객..

- Composable 내에서 다른 Composable을 사용할 수 있도록 하는 패턴 @Composablefun MyCustomCard( title: String, content: @Composable () -> Unit // Slot API를 사용하여 Composable을 매개변수로 받음) { Card { Column { Text(text = title) content() // 전달된 Composable을 호출 } }}@Composablefun MyScreen() { MyCustomCard(title = "Hello") { Text("This is the content of the card.") //..