Composable 썸네일형 리스트형 [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)상태는 아래로 이동하고 이벤트는.. 더보기 [Compose] UI 상태 저장 및 복원 Compose 공식문서를 참고하여 작성하였습니다 UI 상태는 Activity나 프로세스 재생성으로 인해 손실될 수 있다좋은 UX를 위해 UI 상태를 유지하는 것이 중요하다(사용자가 타이핑을 하고 있는데 재생성으로 인해 타이핑하던 text가 없어지면..?!) 상태를 저장하고 복원하기 위해 다양한 API를 사용할 수 있고, 상태가 저장되는 위치와 로직에 따라 달라질 수 있다 상태가 UI에 위치한 경우UI 상태가 Composable 함수나 Composition 범위에 지정된 PlainStateHolder에서 관리될 경우,rememberSavable을 사용해 재생성 후 상태를 유지할 수 있다 rememberSavable 특징UI 상태를 저장하고 복원Activity, 프로세스 재생성 후에도 상태 유지Primit.. 더보기 [Compose] 상태 호이스팅(State Hoisting) Compose 공식문서를 참고하여 작성하였습니다 UI 상태는 UI 상태를 읽고 쓰는 모든 컴포저블의 가장 낮은 공통 상위 요소로 호이스팅해야 합니다 UI 상태(UiState)와 UI 로직 종류 UI 상태 (UI를 설명하는 property)화면 UI State -> 화면에 표시해야 하는 정보 예를 들어, NewsUiState 클래스는 뉴스 기사, 기타 UI 렌더링에 필요한 정보를 포함data class NewsUiState( val isLoading: Boolean = false, val newsList: List = emptyList(), val error: String? = null) UI element State -> UI 요소 자체의 속성 (Visibility, font, fontS.. 더보기 [Compose] Compose Phases Compose 공식 문서를 참고해 번역한 내용입니다. Compose는 UI를 그리기 위해 3개의 단계를 거친다CompositionLayoutDrawing Compose Phase의 특징단방향 데이터 흐름 및 순차적 실행 (Composition -> Layout -> Drawing)이전 단계의 결과를 재사용할 수 있고 조건에 따라 단계를 skip할 수 있다최적화 (단계 내에서 상태(State)를 추적해 필요한 단계만 다시 실행)State 변경 -> Composition 다시Size 변경 -> Layout 다시색상 변경 -> Drawing 다시 CompositionComposable 함수를 실행하고 UI 설명을 생성UI 트리를 생성하거나 업데이트하는 단계이전 Composition과 비교해 변경된 점을 찾는.. 더보기 [Compose] Composable 수명 주기 Compose 공식 문서를 참고해 번역한 내용입니다. Composable의 수명주기를 알기 위해서는 Composition에 대해 알아야 한다 Composition은 UI를 구성하는 기본적인 개념이며 Composable UI Tree 구조 Composition은 초기 Composition을 통해서만 생성되고 Recomposition을 통해서만 업데이트 될 수 있다 Initial Composition (초기 컴포지션)처음 Composable 함수가 호출될 때 발생UI 트리를 처음으로 생성하위 Composable 실행Recomposition상태(State)가 변경될 때 트리거되고 상태를 추적해 State를 읽는 모든 Composable 중 skip할 수 없는 모든 Composable 실행효율적으로 변경된.. 더보기 [Compose] Compose 이해하기 Compose 공식 문서를 참고해 번역한 내용입니다. Compose 이해Compose는 선언형 UI 도구선언형 API를 제공하여 앱 UI를 쉽게 관리 선언형 프로그래밍 패러다임 (Declarative Programming Paradigm) 기존 Android View 계층 구조는 UI 위젯의 트리로 표시findViewById 같은 함수를 사용해 트리를 탐색하고 메서드를 호출해 노드를 변경하는 방식기존 방식의 문제점휴먼에러가 발생할 가능성이 크다 대안으로 선언형 UI 프로그래밍으로 전환- 화면 전체를 개념적으로 재생성하고 필요한 변경사항만 적용하는 방식- Compose는 선언형 UI Framework Compose는Data를 받아 Composable 함수들을 정의하여 UI 요소를 내보내 UI를 빌드할 수 .. 더보기 이전 1 다음
