전체 글

Composer  Composer는 컴포지션(Composition) 트리를 관리하는 역할을 합니다.Composable 함수 실행 및 UI 트리 생성UI 변경 감지 및 업데이트재구성(Recomposition) 최적화 Composer 키우기 Jetpack Compose는 Composer를 사용하여 UI 트리를 효율적으로 관리하며, 필요한 시점에만 노드를 생성 및 업데이트 합니다. 또한, remember를 활용하여 상태를 캐싱하여 불필요한 재구성을 방지합니다.  Layout Composable: UI 노드 추가 및 관리Layout은 모든 UI 요소의 기반이 되는 Composable입니다.내부적으로 ReusableComposeNode를 사용하여 UI 노드를 Composition 트리에 추가합니다.노드를 즉시 생..

슬롯 테이블 및 변경 목록 (The slot table and the list of changes) 슬롯 테이블은 Compose의 UI 상태를 저장하는 인메모리 구조로,초기 Composition 때 데이터를 저장하고 Recomposition이 발생할 때마다 업데이트됩니다. 소스의 위치, 매개변수, 기억된 값, CompositionLocal 등을 추적하며, Composer는 이를 활용해 변경 목록을 생성합니다.이후 Applier가 변경 목록을 적용해 UI 트리를 업데이트하고, Recomposer는 언제, 어떤 스레드에서 Recomposition과 변경 사항 적용을 할지 결정합니다. 슬롯 테이블 심층 분석 (The slot table in depth) 슬롯 테이블은 빠른 접근을 위해 갭 버퍼(Gap Buff..

Compose Compiler 플러그인은 Kotlin 컴파일러 파이프라인에 ComponentRegistrar를 사용하여 자신을 등록합니다.  ComponentRegistrar를 통해 Compose가 필요로 하는 컴파일러 확장(익스텐션)을 등록하고, 이 익스텐션들은 라이브러리 사용을 쉽게 하고, 런타임에서 필요한 코드를 생성하는 역할을 합니다. Compose Compiler 플러그인은 Kotlin 컴파일러에 추가 기능을 더하는 도구입니다.이 플러그인은 컴파일 과정에서 Jetpack Compose에 필요한 코드를 자동으로 만들어 주며, 다음과 같은 기능을 합니다.라이브 리터럴 지원: 코드 수정 없이 실시간으로 UI 변경 확인소스 코드 정보 추가: Android Studio에서 composition 구조를 분..

Jetpack Compose는 Compose Compiler, Compose Runtime, Compose UI 세 가지 핵심 요소로 구성됩니다.Compose Compiler & Runtime: Jetpack Compose의 핵심 요소이며, 다양한 클라이언트 라이브러리에서 사용될 수 있도록 설계됨.Compose UI: Runtime과 Compiler를 활용하는 클라이언트 중 하나로, UI 구성에 초점을 둠. Compose 컴파일러 Jetpack Compose는 Kotlin 컴파일러 플러그인을 사용하여 Composable 함수 정보를 변환합니다.Compose Compiler는 Composable 함수에 Composer 매개변수를 강제로 주입하여 코드 생성을 수행합니다.프론트엔드(frontend) 단계에서 ..

Composable 함수의 의미 Compose Runtime은 Composable 함수를 트리 구조의 노드로 인식하고 관리하기 때문에, 가장 기본이 되는 요소입니다.@Composablefun NamePlate(name:String) { // Our composable code}@Composable 어노테이션을 사용함으로써, 컴파일러에게 이 함수가 데이터를 하나의 노드(node)로 변환하여 Composable 트리에 기재하겠다는 의도를 전달합니다.  Composable 함수는 아래와 같은 형태로, 입력값은 데이터이며 출력은 일반적인 반환 값이 아니라 트리에 요소를 삽입하는 동작(action) 즉, Compose Runtime이 UI 트리에 새로운 요소를 삽입하는 작업입니다.@Composable (In..

UI 상태를 어디로 호이스팅해야 하는지는 UI 상태가 UI 로직과 비즈니스 로직 중 어느 쪽에서 필요한지에 따라 달라집니다. UI 상태는 보통 UI 상태를 읽고 수정하는 모든 컴포저블들이 사용할 수 있도록 가장 가까운 공통된 상위 컴포저블로 호이스팅해야 합니다. 상태는 상태가 소비되는 위치에서 가장 가까운 곳에 유지해야 합니다. 상태 소유자로부터 소비자에게 변경 불가능한 상태 및 이벤트를 노출하여 상태를 수정합니다.  UI 상태 및 UI 로직의 유형 UI 상태 UI 상태는 UI를 설명하는 속성입니다. UI 상태에는 두 가지 유형이 있습니다. 화면 UI 상태: 화면에 표시될 데이터를 포함하며, 앱의 데이터 계층과 연결됩니다. 예를 들어, 뉴스 앱의 NewsUiState에는 뉴스 기사 목록과 관련 정보가 포..

앱의 상태(State)는 시간이 지나며 변하는 값으로, 데이터베이스부터 UI 요소까지 포함됩니다.   상태 및 컴포지션 Compose에서는 UI를 업데이트하려면 새 인수로 컴포저블을 다시 호출해야 합니다. 상태가 변경될 때마다 재구성이 실행되며, TextField 같은 요소도 자동으로 업데이트되지 않습니다. 따라서 새 상태를 명시적으로 전달해야 합니다.   컴포저블의 상태 컴포저블 함수는 remember를 사용해 객체를 메모리에 저장할 수 있습니다.remember는 초기 컴포지션 시 값을 저장하고, 이후 리컴포지션에서도 해당 값을 유지합니다.mutable / immutable 객체 모두 저장할 수 있으며, 컴포저블이 컴포지션에서 제거되면 저장된 객체도 삭제됩니다. 또한, mutableStateOf는 Co..

Composable을 사용하면 여러 개의 Composable을 겹쳐서 쓸 수 있고, 시스템은 각 Composable의 Lifecycle을 관리하며, 필요할 때만 재구성합니다. Composable은 기본적으로 바깥쪽에서 안쪽으로 상태를 내려줘 단방향 의존성이 형성됩니다. 하지만 안쪽 Composable이 바깥쪽 상태를 변경하거나, Composable이 앱 상태를 변경하면 양방향 의존성이 생기며 예측할 수 없는 부수 효과(Side Effect)가 발생할 수 있습니다. Side Effect란 Composable에서 자신이 아닌 외부의 State(상태)에 영향을 만드는 것을 의미하며, 예측할 수 없는 리컴포지션으로 인해 가급적 피하는 것이 좋습니다.    상태 및 효과 사용 사례컴포저블은 부수 효과 없이 동작해..

Compose는 Android 뷰 시스템처럼 측정, 레이아웃, 그리기 단계가 있지만, 그 전에 중요한 컴포지션 단계가 추가됩니다.   프레임의 세 단계 Compose에는 세 개의 주요 단계가 있습니다. 컴포지션: 표시할 UI입니다. Compose는 @Composable 함수를 실행하고 UI 설명을 만듭니다.레이아웃: UI를 배치할 위치입니다. 이 단계는 측정과 배치라는 두 단계로 구성됩니다. 레이아웃 요소는 레이아웃 트리에 있는 각 노드의 레이아웃 요소 및 모든 하위 요소를 2D 좌표로 측정하고 배치합니다.그리기: UI를 렌더링하는 방법입니다. UI 요소는 일반적으로 기기 화면인 캔버스에 그려집니다. Compose는 데이터가 컴포지션에서 레이아웃, 그리기 순서로 이동하는 단방향 데이터 흐름을 따릅니다.(..

Jetpack Compose의 컴포저블(@Composable) 함수는 기존의 Android 생명주기(onCreate(), onResume() 등)와는 다르게 동작합니다. XML 기반 UI 시스템에서는 Activity나 Fragment의 생명주기를 따르지만, Compose에서는 컴포저블 함수 자체가 UI를 동적으로 관리합니다.  컴포지션은 컴포저블 함수들이 트리 구조로 UI를 구성하는 과정입니다.Jetpack Compose는 초기 컴포지션에서 컴포저블을 실행하고 UI 구성을 추적합니다.이후 앱 상태가 변경되면 리컴포지션(Recomposition)을 통해 필요한 컴포저블만 다시 실행하고 UI를 업데이트합니다.컴포지션은 초기 컴포지션에서 생성되며, 리컴포지션을 통해서만 변경될 수 있습니다. 리컴포지션은 일반적..