Compose

sumi Yoo·2024년 8월 19일

Jetpack Compose

  • UI 개발을 간소화하기 위해 설계된 최신 툴킷

Composable 함수

  • @Composable이라는 주석이 달린 일반 함수

Compose의 세 가지 기본 표준 레이아웃 요소

  • Column, Row, Box

Compose와 Kotlin

  • Kotlin의 다른 함수처럼 사용할 수 있음
  • ex) for문 사용해 Column 요소 추가
@Composable
fun MyApp(
    modifier: Modifier = Modifier,
    names: List<String> = listOf("World", "Compose")
) {
    Column(modifier) {
        for (name in names) {
            Greeting(name = name)
        }
    }
}

컴포저블에 내부 상태를 추가하려면?

  • mutableStateOf 함수 사용
  • 컴포저블 내의 변수에 mutableStateOf를 할당하기만 할 수 없음
  • 컴포저블을 호출하는 때마다 리컴포지션 됨
  • remember는 리컴포지션을 방지하는 데 사용되므로 상태가 재설정되지 않음

상태 호이스팅

  • 여러 함수가 읽거나 수정하는 상태는 공통의 상위 항목에 위치해야 함
  • 이 프로세스를 상태 호이스팅 이라고 함

= 대신 by 키워드

  • 매번 .value를 입력할 필요가 없도록 해주는 속성 위임
  • val에서 var로 변경해야 함

LazyColumn/LazyRow

  • 스크롤이 가능한 열을 표시하기 위해 사용
  • 화면에 보이는 항목만 렌더링하므로 항목이 많은 목록을 렌더링할 때 성능이 향상됨
  • Android 뷰의 RecyclerView와 동일
  • RecyclerView와 같은 하위 요소를 재활용하지 않음
  • 컴포저블을 방출하는 것은 Android Views를 인스턴스화하는 것보다 상대적으로 비용이 적게 듦
  • 스크롤 할 때 새 컴포저블을 방출하고 계속 성능을 유지함

화면 회전 상태 유지

  • remember 함수는 컴포저블이 컴포지션에 유지되는 동안에만 작동함
  • 기기를 회전하면 전체 활동이 다시 시작되므로 모든 상태가 손실됨
  • 구성이 변경되거나 프로세스가 중단될 때도 발생(회전/다크모드 변경)
  • 해결방법) remember 대신 rememberSaveable을 사용

animateDpAsState

  • UI에 애니메이션을 지정할 수 있음
  • animationSpec 매개변수를 선택적으로 사용
  • 애니메이션 사용으로 패딩이 음수가 되면 앱이 다운될 수 있음
  • 해결방법) animateDpAsState().coerceAtLeast(0.dp) > 최소값 지정

Modifier

  • .fillMaxWidth() vs android:layout_width="match_parent" >> 최대 넓이
  • .padding() vs margin_
  • wrapContentWidth vs android:gravity="center_horizontal" >> 화면 가운데 정렬

dimensionResource(id)/stringResource(id)

  • dimens.xml 및 strings.xml 파일 값을 가져오는 메서드

ViewModel

  • .observeAsState()
  • 화면 수준 컴포저블에서만 ViewModel을 참조해야 함
  • 하위 컴포저블에 ViewModel의 데이터가 필요한 경우 전체 ViewModel 대신 하위 컴포저블에 필요한 데이터만 전달하는 것이 좋음

Plurals

  • Plurals Strings 는 복수와 단수에 적합한 언어를 사용할 때 필요
  • ex) 읽지 않은 12개 메시지들이 있습니다. vs 읽지 않은 1개 메시지가 있습니다.
  • 한글에서는 별로 사용이 필요한 경우가 많지 않지만, 영어에서는 is 와 are 등 동사부터가 달라지니 필요함
    <plurals name="Morning_Notify_Message">
        <item quantity="one">You miss %d medicine.</item>
        <item quantity="other">You miss %d medicines.</item>
    </plurals>
  • 첫번째 인자에는 plurals id, 두번째는 plurals가 구분할 수 있는 숫자, 세번째는 String의 %d에 들어갈 숫자를
pluralStringResource(
            R.plurals.watering_needs_suffix, wateringInterval, wateringInterval
        )
  • pluralStringResource 사용하려면 ExperimentalComposeUiApi를 선택해야 함

ViewCompositionStrategy

  • 화면전환이 발생할 때 기본 ComposeView가 분리된 상태가 됨. 그러나 이러한 전환 중에도 Compose UI 요소는 계속 표시됨
  • 특히 DisposeOnViewTreeLifecycleDestroyed 전략을 사용하여 프래그먼트의 LifecycleOwner가 소멸되면 컴포지션을 삭제함

calculateWindowSizeClass()

  • 함수를 사용하여 휴대전화의 구성을 확인
  • 앱이 세로 모드인 경우 소형 너비이고, 가로 모드인 경우 확장형 너비

0개의 댓글