재사용 가능한 Composable 함수 만들기.
1. composable 함수는 기본적으로 빈 수정자(Modifier)가 할당되는 수정자 매개변수를 포함하는 것이 좋습니다.
@Composable
fun MyApp(modifier: Modifier = Modifier) {
...
}
함수 내에서 호출하는 첫 번째 컴포저블로 이 수정자를 전달합니다. 이렇게 하면 Caller가 composable 외부에서 레이아웃 안내와 동작을 조정할 수 있습니다.
@Composable
fun MyApp(modifier: Modifier = Modifier) {
Surface(
modifier = modifier,
.
.
) {
....
}
}
* 표준 레이아웃
2. Slot 기반 레이아웃 활용하기
슬롯 기반 레이아웃은 개발자가 원하는 대로 채울 수 있도록 UI에 빈 공간을 남겨 둡니다. 슬롯 기반 레이아웃을 사용하면 보다 유연한 레이아웃을 만들 수 있습니다.
@Composable
fun HomeSection(
@StringRes title: Int,
modifier: Modifier = Modifier,
content: @Composable () -> Unit
) {
Column(modifier) {
Text(stringResource(title))
content()
}
}
@Preview(showBackground = true, backgroundColor = 0xFFF5F0EE)
@Composable
fun HomeSectionPreview() {
MySootheTheme {
HomeSection(R.string.align_your_body) {
AlignYourBodyRow()
}
}
}
composable은 일반적으로 content composable lamda (content: @Composable () -> Unit)를 사용합니다.
3. 적절한 State Hosting(상태 호이스팅)
remember를 사용하여 객체를 저장하는composable에는 내부 상태가 포함되며 이는 컴포저블을 스테이트풀(Stateful)로 만듭니다. 이는 호출자가 상태를 제어할 필요가 없고 상태를 직접 관리하지 않아도 상태를 사용할 수 있는 경우에 유용합니다. 그러나 내부 상태를 갖는 컴포저블은 재사용 가능성이 적고 테스트하기가 더 어려운 경향이 있습니다.
스테이트리스(Stateless) composable
- 상태를 소유하지 않는 컴포저블입니다. 즉, 새 상태를 보유하거나 정의하거나 수정하지 않습니다.
스테이트풀(Stateful) composable
- 시간이 지남에 따라 변할 수 있는 상태를 소유하는 컴포저블입니다.
- 실제 앱에서는 컴포저블의 기능에 따라 컴포저블을 100% 스테이트리스(Stateless)로 하는 것은 어려울 수 있습니다.
composable이 가능한 한 적게 상태를 소유하고, 적절한 경우 컴포저블의 API를 통해 상태를 노출하여 상태를 끌어올릴 수 있도록 컴포저블을 디자인해야 합니다.
어떻게 Stateful ==> Stateless 하게 할 수 있을까??
compose에서 State Hosting은 컴포저블을 스테이트리스(Stateless)로 만들기 위해 상태를 컴포저블의 호출자로 옮기는 패턴
Jetpack Compose에서 상태 호이스팅을 위한 일반적 패턴은 상태 변수를 다음 두 개의 매개변수로 바꾸는 것입니다.
- value: T - 표시할 현재 값입니다.
- onValueChange: (T) -> Unit - 값이 새 값 T로 변경되도록 요청하는 이벤트
* State Hosting 중요한 속성
- 단일소스 저장소: 상태를 복제하는 대신 옮겼기 때문에 소스 저장소가 하나만 있습니다. 버그 방지에 도움이 됩니다.
- 상태공유: 끌어올린 상태를 여러 컴포저블과 공유할 수 있습니다.
- 이벤트가로채기 : 스테이트리스(Stateless) 컴포저블의 호출자는 상태를 변경하기 전에 이벤트를 무시할지 수정할지 결정가능
- 분리/저장 가능: 구성 가능한 스테이트리스(Stateless) 함수의 상태는 어디에든(예: ViewModel) 저장할 수 있습니다.
그렇다면 무조건 상태를 끌어 올리는것이 좋은건가요??? NO.....
UI Tree의 최소 공통 조상까지 Hosting을 한다.
Hosting의 3가지 규칙.
- 상태는 적어도 그 상태를 사용하는 모든 컴포저블의 가장 낮은 공통 상위 요소로 끌어올려야 합니다(읽기).
- 상태는 최소한 변경될 수 있는 가장 높은 수준으로 끌어올려야 합니다(쓰기).
- 두 상태가 동일한 이벤트에 대한 응답으로 변경되는 경우 두 상태는 동일한 수준으로 끌어올려야 합니다.
이러한 규칙에서 요구하는 것보다 더 높은 수준으로 상태를 끌어올릴 수 있습니다. 하지만 상태를 충분히 높은 수준으로 끌어올리지 않으면 단방향 데이터 흐름을 따르기가 어렵거나 불가능할 수 있습니다.
4. NavigationController