compose study - 2주차

11월 12일에 공부하고, 1달만에 2주차 아닌 2주차 스터디 진행

https://developer.android.com/codelabs/jetpack-compose-layouts?continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fjetpack-compose-for-android-developers-1%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fjetpack-compose-layouts#1 

Compose의 기본 레이아웃  |  Android Developers

(오후 4시27분) Compose의 기본 레이아웃 코드랩 진행

(오후 5시45분) 마무리

 

공부하면서 느낀점

• 샘플 코드여서 그런지 간결하게 예쁜 레이아웃을 만들었다.
• 디자이너의 관점에서 설명한 코드랩이 좋았다.
• 정렬에 대한 개념을 다시 잡을 수 있어서 좋았다.

Modifer의 역할

컴포저블을 작성할 때는 수정자를 사용하여 다음을 합니다.

• 컴포저블의 크기, 레이아웃, 동작, 모양 변경
• 접근성 라벨과 같은 정보 추가
• 사용자 입력 처리
• 요소를 클릭 가능, 스크롤 가능, 드래그 가능 또는 확대/축소 가능하게 만드는 것과 같은 높은 수준의 상호작용 추가

Modifer를 통해서 최소높이 지정은 아래와 같은 이점이 있다.

• 고정 높이가 아닌 최소 높이를 설정했습니다. 이렇게 하면 사용자가 시스템 설정에서 글꼴 크기를 늘릴 경우 텍스트 필드의 크기가 커질 수 있게 되므로 권장되는 방식입니다.

Column, Row, Box의 정렬 방식

Column의 경우 하위 요소를 가로로 정렬할 방법을 정해야 합니다. 옵션은 다음과 같습니다.

• Start
• CenterHorizontally
• End

Row의 경우 세로 정렬을 설정해야 합니다. 옵션은 Column의 옵션과 유사합니다.

• Top
• CenterVertically
• Bottom

Box의 경우 가로 및 세로 정렬을 결합하여 사용합니다. 옵션은 다음과 같습니다.

• TopStart
• TopCenter
• TopEnd
• CenterStart
• Center
• CenterEnd
• BottomStart
• BottomCenter
• BottomEnd

Row의 배치 형태

Column의 배치 형태

Jetpack Compose의 상태

Jetpack Compose의 상태  |  Android Developers

용어 정리

- 이벤트 : 이벤트는 사용자 또는 프로그램의 다른 부분에 의해 생성됩니다.

- 상태 업데이트 : 이벤트 핸들러가 UI에서 사용되는 상태를 변경합니다.

- 상태 표시 : 새로운 상태를 표시하도록 UI가 업데이트 됩니다.

 

- 컴포지션: 컴포저블을 실행할 때 Jetpack Compose에서 빌드한 UI에 관한 설명입니다.

- 초기 컴포지션: 처음 컴포저블을 실행하여 컴포지션을 만듭니다.

- 리컴포지션: 데이터가 변경될 때 컴포지션을 업데이트하기 위해 컴포저블을 다시 실행하는 것을 말합니다.

 

rememberSaveable

Configuration 등을 통해서 뷰가 새로고침 될 때는 remeber대신 remeberSaveable을 사용해야한다.
rememberSaveable은 bundle에 저장될 수 있는 데이터를 사용한다.

 

단방향 데이터 흐름을 위해서 알아야할 내용

단방향 데이터 흐름은 UDF는 상태가 내려가고, 이벤트는 올라가는 패턴이다.

• 단일 소스 저장소: 상태를 복제하는 대신 옮겼기 때문에 소스 저장소가 하나만 있습니다. 버그 방지에 도움이 됩니다.
• 공유 가능함: 끌어올린 상태를 여러 컴포저블과 공유할 수 있습니다.
• 가로채기 가능함: 스테이트리스(Stateless) 컴포저블의 호출자는 상태를 변경하기 전에 이벤트를 무시할지 수정할지 결정할 수 있습니다.
• 분리됨: 구성 가능한 스테이트리스(Stateless) 함수의 상태는 어디에든(예: ViewModel) 저장할 수 있습니다.

- 내부상태를 갖는 갖는 컴포저블은 재사용 가능성이 적고, 테스트 하기가 어려운 경향이 있다.

- 상태를 보유하지 않은 컴포저블은 스테이트리스 컴포저블이라고 한다.

- 컴포저블은 내부 상태를 보유하지 않아야하고, 이를 스테이트리스 컴포저블이라고 말한다. 이를 해결하기 위해서는 상태 끌어올리기를 해야하고, 이를 호이스팅이라고 말한다.

- value:T : 표시할 현재값

- onValueChange:(T)->Unit : 값을 변경하도록 요청하는 이벤트

 

상태끌어올리기를 위한 수칙

1. 상태는 적어도 그 상태를 사용하는 모든 컴포저블의 가장 낮은 공통 상위 요소로 끌어올려야 합니다(읽기).
2. 상태는 최소한 변경될 수 있는 가장 높은 수준으로 끌어올려야 합니다(쓰기).
3. 두 상태가 동일한 이벤트에 대한 응답으로 변경되는 경우 두 상태는 동일한 수준으로 끌어올려야 합니다.

상태를 높이 끌어올려야만 단방향 데이터 흐름을 진행할 수 있다.

 

List를 컴포지션으로 사용하기 위해서 할 일

-  리스트를 사용하고 있을 때, 스크롤을 할 경우에 remember로 bool 값을 감싸고 있다면 check가 유지되지 않는데, rememberSaveable로 감싸게 되면 check가 유지된다. 이에 대한 정확한 메커니즘에 대해서는 찾아볼 수 없었지만, rememberSaveable은 bundle에 저장되어 값이 유지된다고 한다. 이게 List에서 사용될 경우에 자동적으로 키값과 매칭해서 데이터를 저장하는 ui 로직이 있지 않을까 추측해본다.

 

- MutableList를 toMutableStateList로 감싸게 되면, compose에서 관찰할 수 있다.

- 긴 직렬화 또는 역직렬화가 필요한 복잡한 데이터 구조나 대량의 데이터를 저장하는 데 rememberSaveable을 사용해서는 안 됩니다.

 

https://developer.android.com/codelabs/jetpack-compose-theming?continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fjetpack-compose-for-android-developers-1%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fjetpack-compose-theming#0 

Jetpack Compose 테마 설정  |  Android Developers

테마

 

- 뷰마다 지정되는 색상은 다르게 되어 있어서, 색상이 잘 셋팅되어 있어야 한다.

- 정의된 서체를 지정할 수 있다.

- 도형 테마를 통해서 소형, 중형, 대형 테마에 매칭한 뷰들이 지정되어 있다.

- contentForColor() 메소드는 잘 어울릴만한 색상을 추천해준다.

- LabelContentColor, CompositionColor 현재 배경과 대비되는 색상

- CompositionLocalProvider는 어떨 때, 사용하는 것이 가장 좋은 지 모르겠지만 특정 해당 코드랩에서는 A테마를 사용하다가 동일 선상에 있는 하위 ui 로직에서 B테마로 전환하기 위한 용도로 사용한다.

 

 

https://developer.android.com/codelabs/jetpack-compose-migration?continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fcompose%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fjetpack-compose-migration#0 

Jetpack Compose로 이전  |  Android Developers

Jetpack Compose로 이전

- 기존 Android 프로젝트와 조화가 너무 매끄럽다.