[Android] Jetpack Compose

Jetpack Compose는 선언형 UI 도구 키트이다.

프런트엔드 뷰를 명령형으로 변형하지 않고도 앱 UI를 렌더링할 수 있게 하는 선언형 API를 제공한다.

 

1. 명령형 vs 선언형

• 기존 명령형 접근 방식

위젯을 인스턴스화함으로써 UI를 초기화한다. (보통 XML 레이아웃 파일을 inflate 하여 이 작업을 한다)

각 위젯은 자체 state 를 유지하고 위젯과 상호작용할 수 있는 getter 및 setter 메서드를 노출한다.

 

• Compose의 선언형 접근 방식

위젯은 보통 Stateless 상태이며 setter 또는 getter 함수를 노출하지 않는다.

위젯은 객체로 노출되지 않는다.

같은 Composable 함수를 다른 인수로 호출하여 UI를 업데이트한다.(이렇게 하면 MVVM과 같은 아키텍처 패턴에 상태를 쉽게 제공할 수 있다)

그런 다음 Composable 은 데이터가 업데이트될 때마다 애플리케이션 상태를 UI로 변환한다.

 

2. Composable 선언

// component 선언
@Composable
fun Greeting(name: String) {
    Text("Hi $name")
}

 

// 사용
Column (modifier = Modifier.padding(16.dp)) {

        Greeting("승주")
        Greeting("승희")
        Greeting("승우")
        Greeting("승철")
        
    }

1. @Composable 주석으로 이 함수가 데이터를 UI로 변환하기 위한 함수라는 것을 컴포즈 컴파일러에 알린다.
2. 리턴값이 없다. UI를 내보내는 컴포즈 함수는 원하는 화면 상태를 설명한다.
3. 함수는 동일한 인수로 호출될 때 동일한 방식으로 작동한다. 전역 변수 또는 random() 호출과 같은 다른 값을 사용하지 않는다. (참고 : 멱등)
4. 상태나 전역 변수가 업데이트되는 부수작용 없이 UI를 형성한다.

 

3. 재구성(이벤트와 데이터의 흐름)

1. UI는 onClick과 같은 이벤트를 발생시킨다.
2. 이벤트를 앱 로직에 전달하여 앱의 상태를 변경해야 한다.
3. 상태가 변경되면 컴포저블 함수는 새 데이터와 함께 다시 호출된다.
4. UI 요소가 다시 그려진다.

이 프로세스를 재구성이라고 한다.

• Events

1. 사용자와 UI 요소의 상호작용에 따라 이벤트가 트리거됨
2. 앱 로직이 이벤트에 응답
3. 컴포저블 함수가 필요한 경우 새 매개변수를 사용하여 자동으로 다시 호출

 

• Data

1. 앱 로직은 최상위의 컴포저블 함수에 데이터를 제공
2. 함수는 데이터를 사용하여 다른 컴포저블 을 호출함으로써 UI를 형성하고 데이터를 해당 컴포저블 및 계층 구조 아래로 전달

 

4. 동적 콘텐츠

컴포저블 함수는 XML이 아닌 Kotlin으로 작성되기 때문에 다른 Kotlin 처럼 동적일 수 있다. 

조건문이나 루프문과 같이 기본 언어의 유연성을 활용할 수 있다.

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

 

5. State

Jetpack compose를 사용하면 Android 앱에서 상태를 저장하고 사용하는 위치와 방법을 명시적으로 나타낼 수 있다.

 

• Android 앱 State 사례
  • 네트워크 연결을 설정할 수 없을 때 표시되는 스낵바
  • 블로그 게시물 및 관련 댓글
  • 사용자가 클릭하면 버튼에서 재생되는 물결 애니메이션
  • 사용자가 이미지 위에 그릴 수 있는 스티커

 

컴포즈를 업데이트하는 유일한 방법은 새 인수로 동일한 컴포저블을 호출하는 것이다. 이러한 인수는 UI 상태를 표현한다. 상태가 업데이트될 때마다 재구성이 실행된다. 따라서 TextField와 같은 항목은 명령형 XML 기반 뷰에서처럼 자동으로 업데이트되지 않는다. 컴포저블이 새 상태에 따라 업데이트되려면 새 상태를 명시적으로 알려야 한다.

 

 

 

 

 

Ref

• d.android