Jetpack Compose 를 배워보자 (1)

Jetpack Compose 를 배워보자 (1)

728x90

https://developer.android.com/codelabs/jetpack-compose-basics?hl=ko#0

https://developer.android.com/jetpack/compose/mental-model?hl=ko

코드랩과 공식문서를 참고해서 Jetpack Compose를 정리해본다.

Jetpack Compose는 뷰를 명령형으로 변형하지 않고도 UI를 렌더링할 수 있게하는 선연형 API를 제공한다.

기존에는 Android 뷰 계층구조를 UI 위젯의 트리로 표시할 수 있었고 UI를 업데이트하기 위해 findViewById()와 같은 함수를 사용하여 트리를 탐색하고 UI를 변경해주는 메소드를 호출하여 노드를 변경했습니다.

이러한 방식은 수동으로 뷰를 조작하여 오류가 발생할 가능성이 커지고 데이터를 여러 위치에서 렌더링하면 데이터를 표하시는 뷰 중 하나를 업데이트 하는것을 잊기 쉬우며 두가지 업데이트시 예기치 않은 방식으로 충돌할 수 있다.

또한 업데이트가 필요한 뷰의 수가 많아질수록 소프트웨어 유지관리 복잡성이 증가한다.

이를 해결하기 위해서 선언형 UI모델로 전환하여 사용자 인터페이스 빌드 및 업데이트와 관련된 엔지니어링을 크게 간소화시킨다.

선언형 UI모델은 처음부터 화면 전체를 개념적으로 재생성하고 필요한 변경사항만 적용하는 방식으로 작동한다.

Compose를 사용하면 데이터를 받아서 UI요소를 내보내는 Composable function을 정의하여 사용자 인터페이스를 빌드할 수 있다.

Composable function

모든 Composablefunction에는 @Composable 주석이 있어야합니다. 이 주석은 이 함수가 데이터를 UI로 변환하기 위한 함수라는 것을 Compose 컴파일러에 알립니다.

함수는 데이터를 받을 수 있다. 받은 매개변수를 통해 앱 로직이 UI를 형성할 수 있다.

함수는 아무것도 반환하지 않는다. UI를 내보내는 Compose함수는 UI 위젯을 구성하는 대신 원하는 화면 상태를 서렴ㅇ하므로 아무것도 반환할 필요가 없다.

Dynamic content

Composable function은 xml 대신 코틀린으로 작성되어서 다른 코틀린 코드처럼 동적으로 처리할 수 있다.

다음과 같이 list를 UI에 빌드할때 동적으로 처리할 수 있다.

@Composable fun Greeting(names: List) { for (name in names) { Text("Hello $name") } }

재구성

명령형 UI에서 위젯을 변경하려면 위젯에서 setter를 호출해서 내부 상태를 변경하는데 Compose에서는 새 데이터를 사용하여 Composable 함수를 다시 호출한다.

이렇게하면 함수가 재구성되며 필요한 경우 함수에서 내보낸 위젯이 새 데이터로 다시 그려진다.

@Composable fun ClickCounter(clicks: Int, onClick: () -> Unit) { Button(onClick = onClick) { Text("I've been clicked $clicks times") } }

다음과 같이 버튼을 표시하는 함수가 있으면 버튼이 클릭될때마다 clicks 값이 업데이트되고 Compose는 Text함수를 사용해서 람다를 다시 호출해서 새 값을 표시한다. 이 프로세스를 재구성이라고 한다.

재구성은 입력이 변경될 때 Composable function을 다시 호출하는 프로세스다. 이는 함수의 입력이 변경될 때 발생한ㄴ다. Compose는 새 입력을 기반으로 재구성할 때 변경되었을 수 있는 함수 또는 람다만 호출하고 나머지는 건너뛰어 재구성이 효율적으로 이뤄진다.

Composable fuction은 순서와 관계없이 실행 할 수 있음

@Composable fun ButtonRow() { MyFancyNavigation { StartScreen() MiddleScreen() EndScreen() } }

다음과 같은 코드가 있을때 순서대로 StartScreen, MiddleScreen, EndScreen이 실행되는 것이 아니다.

Compose는 UI요소의 우선순위를 인식하고 그 요소를 먼저 그리는 옵션이 있다.

Composable fuction은 동시에 실행 할 수 있음

08/02 내일 추가로 수정

from http://gwynn.tistory.com/87 by ccl(A) rewrite - 2021-08-02 22:26:14