본문 바로가기

Composable

[ComposeInternals] Compose Runtime 고급 사용 사례 (Advanced Compose Runtime use cases) Jetpack Compose Internals를 참고하여 작성하였습니다 Compose Runtime vs Compose UICompose RuntimeCompose의 기본적인 기계 장치와 제공상태 관리와 composition 관련 원시 요소(primitives)를 제공UI에 제한되지 않고 다양한 트리 구조를 관리할 수 있음Kotlin이 실행되는 모든 플랫폼에서 사용 가능Android나 UI에 직접적인 의존성이 거의 없음Compose UI새로운 안드로이드 UI 툴킷, 캔버스 위에 LayoutNode 트리가 표현하는 내용을 그림안드로이드 UI 개발에 특화됨 멀티플랫폼 지원Compose Runtime은 UI 외에 다양한 트리 구조를 만드는데 사용할 수 있다Compose for DesktopAndroid 구현.. 더보기
[ComposeInternals] 상태 스냅샷 시스템 (State snapshot system) Jetpack Compose Internals를 참고하여 작성하였습니다 상태 스냅샷 시스템상태를 표현하고 상태 변경 사항을 전파해 반응형 경험을 제공하는 방법 스냅샷 상태 (What snapshot state is)변경 사항을 기억하고 관찰할 수 있는 분리된 상태이며 ComposeRuntime에 정의된 상태 스냅샷 시스템의 일부(mutableStateOf, mutableStateListof, derivedStateOf 등의 함수를 호출할 때 얻는 상태) 스냅샷 상태 시스템은상태 변경과 변경 전파를 모델링하고 조정독립적 형태로 작성되어 다른 라이브러리에서도 사용이 가능 스냅샷 상태 시스템의 특징스냅샷 상태가 자동으로 관찰되는 메커니즘Compose 컴파일러가 모든 Composable 함수와 표현식을 래핑.. 더보기
[ComposeInternals] 컴포즈 UI (Compose UI) - (4) Modifier Jetpack Compose Internals를 참고하여 작성하였습니다  Modifier는 Compose UI에서 굉장히 중요한 부분이다  Modifier 체인 모델링 (Modeling modifier chains)Modifier 인터페이스는 UI Composable을 장식하거나 동작을 추가하는 불변 요소의 컬렉션을 모델링 3가지 기능을 제공하는 추상화then (수정자의 모든 유형을 체인으로 결합)foldIn, foldOut (체인을 통과하면서 값을 누적)any, all (체인 내 any, all 조건과 일치하는지 확인하는 연산 제공) Modifier.kt@Stable@JvmDefaultWithCompatibilityinterface Modifier { /** * initial 값으로 시작해.. 더보기
[ComposeInternals] 컴포즈 UI (Compose UI) - (2) Measure(측정) Jetpack Compose Internals를 참고하여 작성하였습니다  Compose UI에서의 측정 (Measuring in Compose UI)실제 측정이 어떻게 이뤄지는가 모든 LayoutNode는 Owner를 통해 재측정을 요청할 수 있다요청 시 Owner(뷰)는 "dirty"로 표시(invalidate)되며 노드는 재측정 및 재배치할 노드 목록에 추가된다다음 그리기 시점에 AndroidComposeView의 dispatchDraw 함수가 호출된다AndroidComposeView는 재측정 및 재배치할 노드 목록을 순회하고 해당 작업 수행 재측정 및 재배치가 예정된 노드에 적용되는 3가지 단계노드가 재측정이 필요한지 확인 후 재측정 수행측정 후, 재배치가 필요한지 확인 후 재배치 수행모든 노드에 .. 더보기
[ComposeInternals] Compose 컴파일러(1) - 어노테이션 Jetpack Compose Internals를 참고해 작성하였습니다 Jetpack Compose는 다양한 라이브러리로 구성되어 있다대표적으로 Compose Compiler, Compose Runtime, Compose UI가 있다 Compose 코드는 Compose Compiler에 의해 Compose Runtime이 이해할 수 있는 코드로 변환되고, Runtime은 이 코드를 실행하여 UI를 구성하고 관리한다 먼저 Compose Compiler에 대해 알아보자 Compose CompilerKotlin 함수에 Composable 어노테이션을 선언하면 해당 함수는 Composable 함수로 변형된다Kotlin에서는 어노테이션을 처리할 때 보통 kapt, ksp를 사용한다 하지만 Compose에서는 어노.. 더보기
[ComposeInternals] Composable 함수들 Jetpack Compose Internals를 참고해 작성하였습니다 Composable 함수들 Composable 함수 Compose의 가장 기본이 되는 요소, Composable 트리 구조 작성하는데 사용Compose Runtime이 Composable 함수를 메모리에서 큰 트리의 구성된 하나의 노드로 이해하고 나타낸다 예시)@Composablefun NamePlate(name:String) { // code} Composable 어노테이션함수가 데이터를 하나의 노드로 변환하여 Composable 트리에 올리겠다는 의도 전달데이터란 함수의 인자를 포함한 함수의 구현 정보를 포괄적으로 의미 입력값은 데이터, 출력은 방출(Emitting)방출은 트리에 요소를 삽입하기 위해 기재된 일련의 동작(act.. 더보기
[Compose] Compose 아키텍처 레이어링 Compose 공식문서를 참고하여 작성하였습니다  Compose는 여러 모듈로 구성되어 있고 각 모듈은 특정 기능을 담당 Compose의 기본 레이어 각 Layer는 하위 수준에 기반하고 상위 수준의 모듈을 만들기 위해 기능 결합 Runtime LayerCompose 런타임의 핵심 기능 (remember, mutableStateOf, @Composable 등)을 제공Compose가 UI를 어떻게 관리하고 업데이트하는지에 대한 기본적인 기능을 담당UI 관련 기능은 포함하지 않는다remember: 컴포저블이 다시 실행될 때에도 값을 유지하는 데 사용mutableStateOf: 상태를 변경하고 UI를 업데이트하는 데 사용@Composable: 컴포저블 함수를 선언하는 데 사용package androidx.co.. 더보기
[Compose] Compose 아키텍처 Compose UI는 Immutable하고 직접 업데이트할 수 없다UI 상태를 통해 Compose가 변경된 부분만 다시 그린다 또한 Composable 함수는 기본적으로 상태는 아래로 흐르고 이벤트는 위로 흐른다예시) 상태를 입력으로 받아(name) 이벤트를 노출하는(onValueChange) Composablevar name by remember { mutableStateOf("") }OutlinedTextField( value = name, onValueChange = { name = it }, label = { Text("Name") }) Compose에는 단방향 데이터 흐름이 적합하다 단방향 데이터 흐름 (Unidirectional Data Flow)상태는 아래로 이동하고 이벤트는.. 더보기