2023-12-28

Compose Basic

1. Compose

 

Jetpack Compose는 UI 개발을 간소화하기 위해 설계된 최신 툴킷입니다. 반응형 프로그래밍 모델을 Kotlin 프로그래밍 언어의 간결함 및 사용 편의성과 결합합니다. 이는 완전히 선언적인 접근 방식으로, 데이터를 UI 계층 구조로 변환하는 일련의 함수를 호출하여 UI를 설명합니다. 기본 데이터가 변경되면 프레임워크가 이러한 함수를 자동으로 다시 실행하여 UI 계층 구조를 업데이트합니다.

 

• compose ui를 사용하려면 Composable 어노테이션을 선언해야함
• @Composable은 클래스단위에는 붙일 수 없고, 함수 단위에 붙일 수 있음
• @Composable을 붙어야 Text 같이 선언형 UI를 구현할 수 있음

2. Recomposition

Recomposition(리컴포지션)
Compose 앱은 구성 가능한 함수를 호출하여 데이터를 UI로 변환한다.
데이터가 변경되면 Compose는 새 데이터로 이러한 함수를 다시 실행하여 업데이트된 UI를 만든다.
이 과정을 리컴포지션이라고 한다.

Compose는 데이터가 변경된 요소만 다시 구성하고, 영향을 받지않은 요소는 건너뛴다.
@Composable에 내부 상태를 추가하려면 mutableStateOf를 통해 관리한다.

이 함수를 사용하면 Compose가 State를 읽는 함수를 재구성한다.
 State 및 MutableState는 어떤 값을 보유하고 그 값이 변경될 때마다 UI 업데이트(리컴포지션)를 트리거하는 인터페이스입니다.

하지만 @Composable 내의 변수에 mutableStateOf만 할당해서는 할 수 없다.
변경가능한 새 상태로 상태를 재설정하여 컴포저블을 다시 호출할떄는 언제든 리컴포지션이 일어날 수 있기 떄문에 여러 리컴포지션간에 상태를 유지하려면 remember를 사용하여 변경 가능한 상태를 기억해야한다.

 

3. State Hoisting

컴포저블 함수에서 여러함수를 읽거나 수정하는 상태는 공통의 상위 항목에 위치해야한다.
이러한 과정을 상태 호이스팅이라고한다.

 

상태 호이스팅을 할 수 있게 하면 상태가 중복되지 않고 버그를 방지 할 수 있으며
컴포저블을 재사용, 테스트를 쉽게 할 수 있다.

컴포저블의 상위요소에서 제어할 필요가 없는 상태는 호이스팅이 되면 안된다.