🏁 ComposeCamp 시작
Compose를 본격적으로 정리할 수 있는
아주 좋은 동기부여의 기회가 생겼습니다.
구글에서 주최하는 Compose Camp로 초대 받아서
매주 Week를 진행하게 되었습니다.
코스는 초급코스와 중급코스가 나뉘어져 있는데
저는 중급코스로 시작하게 되었습니다.
(🥺 1주차에 937명이나 도전 중!)
각 주마다 훌륭하신 안드로이드 개발자분들의
영상이 올라오고 코드랩을 진행하는 형태 입니다.
저는 코드랩을 진행하면서 필요한 내용을
정리하는 형태로 블로그에 작성 해볼려고 합니다.
UI 조정
Surface
Surface 및 MaterialTheme은
머티리얼 디자인과 관련된 개념이며,
머티리얼 디자인은 사용자 인터페이스와 환경을 만드는 데 도움을 주기 위해
Google에서 만든 디자인 시스템입니다.
Modifier(수정자)
Compose UI 요소는 modifier
매개변수를 선택적으로 허용합니다.
수정자는 상위 요소 레이아웃 내에서 UI 요소가 배치되고 표시되고 동작하는 방식을
UI 요소에 알려줍니다.
열과 행 만들기
- Compose의 세 가지 기본 표준 레이아웃 요소는 Column, Row, Box 입니다
tip) @preview 주석에 일반적인 스마트폰 넓이 widthDp 매개변수로 320p tip) modifier의 fillMaxWidth 와 padding 을 활용하여 뷰의 넓이를 컨트롤tip) alignEnd 수정자가 없으므로 시작 시 컴포저블에 약간의 weight을 제공합니다.
weight 수정자는 요소를 유연하게 만들기 위해 가중치가 없는 다른 요소(유연성 부족이라고 함)를 효과적으로 밀어내어
요소의 사용 가능한 모든 공간을 채웁니다.
이 수정자는 fillMaxWidth 수정자와 중복되기도 합니다.Compose에서의 상태
상태란
- 각 항목이 펼쳐진 상태인지를 가리키는 값
💡 Compose 앱은 구성 가능한 함수를 호출하여 데이터를 UI로 변환합니다.
데이터가 변경되면 Compose는 새 데이터로 이러한 함수를 다시 실행하여 업데이트된 UI를 만듭니다.
이를 리컴포지션이라고 합니다.
또한, Compose는 데이터가 변경된 구성요소만 다시 구성하고
영향을 받지 않는 구성요소는 다시 구성하지 않고 건너뛰도록
개별 컴포저블에서 필요한 데이터를 확인합니다.
다음은 Compose 이해에 언급된 내용입니다.
- 구성 가능한 함수는 자주 실행될 수 있고 순서와 관계없이 실행될 수 있으므로
코드가 실행되는 순서 또는 이 함수가 다시 구성되는 횟수에 의존해서는 안 됩니다.
리컴포지션 트리거
State 및 MutableState
는 어떤 값을 보유하고 그 값이 변경될 때마다 UI 업데이트(리컴포지션)를
트리거하는 인터페이스입니다.
🤔 만약 여러 컴포지션간에 상태를 유지하여 상태를 기억할려면 어떻게 해야할까?
- remember
- 리컴포지션을 방지하는데 사용 > 상태가 재설정되지 않게 기억함
상태와 업데이트
구성 가능한 함수는 상태를 자동으로 '구독'합니다.
상태가 변경되면 이러한 필드를 읽는
컴포저블이 재구성되어 업데이트를 표시합니다.
상태 호이스팅
구성 가능한 함수에서 여러 함수가 읽거나 수정하는 상태는 공통의 상위 항목에 위치해야 합니다.
=> 이 프로세스를 상태 호이스팅이라고 합니다.
(들어올린다 또는 끌어올린다 라는 의미)
tip) MutableState 사용 시 by 키워드를 사용하여 매번 .value를 입력할 필요가 없도록 해주는 속성 위임📌 상태를 호이스팅 후 전달 시
- 이벤트를 아래로 콜백을 전달.
💡 상태를 호이스팅 했을 때
⇒ 직접 전달X, 함수로 전달하여 다른 컴포저블에서 상태 변경하지 않게 보호 및 재사용 높임
성능 지연 목록 만들기
스크롤이 가능한 열을 표시하기 위해
LazyColumn을 사용합니다.
LazyColumn은 화면에 보이는 항목만 렌더링하므로
항목이 많은 목록을 렌더링할 때 성능이 향상됩니다.
💡 참고:LazyColumn과LazyRow는 Android 뷰의RecyclerView와 동일합니다.
상태 유지
-
remember함수컴포저블이 컴포지션에 유지되는 동안에만 작동합니다.
기기를 회전하면 전체 활동이 다시 시작되므로 모든 상태가 손실됩니다.
이 현상은 구성이 변경되거나 프로세스가 중단될 때도 발생합니다. -
rememberSaveable이 함수는 구성 변경(예: 회전)과 프로세스 중단에도 각 상태를 저장합니다.
💡스크롤 시상태가 풀리는 이슈도 위 함수로 해결 가능함.
목록에 애니메이션 적용
- animateDpAsState
- 애니메이션이 완료될 때까지 애니메이션에 의해 객체의 value가 계속 업데이트되는 상태 객체를 반환
앱의 스타일 지정 및 테마 설정
일반적으로 MaterialTheme 내부의 색상, 모양, 글꼴 스타일을 유지하는 것이 훨씬 좋습니다.
예를 들어, 어두운 모드는 색상을 하드 코딩하는 경우 구현하기 어렵고 오류가 발생하기 쉬운 작업이 많이 요구됩니다.
그러나 가끔 색상과 글꼴 스타일의 선택에서 약간 벗어나야 할 때도 있습니다.
이러한 상황에서는 기존에 사용하고 있는 색상이나 스타일을 기반으로 하는 것이 좋습니다.
이를 위해 copy 함수를 사용하여 미리 정의된 스타일을 수정할 수 있습니다.
하나의 프리뷰 함수 안에서 다크모드 따로 만들기
@Preview(
showBackground = true,
widthDp = 320,
uiMode = UI_MODE_NIGHT_YES,
name = "DefaultPreviewDark"
)
@Preview(showBackground = true, widthDp = 320)
@Composable
fun DefaultPreview() {
BasicsCodelabTheme {
Greetings()
}
}