Compose의 UI는 변경할 수 없다. UI를 설계한 후 업데이트를 할 수가 없다. 하지만 UI 상태는 제어할 수 있다. UI 상태가 변경될 때마다 Compose는 변경된 UI 트리 부분을 다시 만든다.(리컴퍼저블) 이때 컴퍼저블은 상태를 수락하고 이벤트를 노출할 수 있다.

예를 들어 TextField는 값을 수락 하고 onValueChange를 노출한다. 이 콜백은 값을 변경하기 위해 콜백 핸들러를 요청한다.

var name by remember { mutableStateOf("") }
OutlinedTextField(
    value = name,
    onValueChange = { name = it },
    label = { Text("Name") }
)

컴포저블이 상태를 수락하고 이벤트를 노출하기 때문에 단방향 데이터 흐름 패턴은 Jetpack Compose에 적합 하다.

단방향 데이터 흐름

단방향 데이터 흐름(UDF)은 상태는 아래로 이동하고 이벤트는 위로 이동하는 디자인 패턴

단방향 데이터 흐름을 따라 UI에 상태를 표시하는 컴포저블과 상태를 저장하고 변경하는 앱을 서로 분리할 수 있다.

단방향 데이터 흐름을 사용하는 앱의 UI 업데이트 루프는 다음과 같다.

• 이벤트: UI의 일부가 이벤트를 생성하여 위쪽으로 전달하거나(ex: 이벤트를 처리하기 위해 ViewModel에 전달되는 버튼 클릭) 앱의 다른 레이어에서 이벤트가 전달 된다.(ex. 사용자 세션이 종료가 되었음을 표시할때)
• 상태 업데이트: 이벤트 핸들러가 상태를 변경할 수도 있다.
• 상태 표시: 상태 홀더가 상태를 아래로 전달하고 UI가 상태를 표시한다.

Compose를 사용할때 위 패턴을 쓰면 이점이 있다.

• 테스트 가능성: 상태와 상태를 표시하는 UI를 분리하여 격리 상태에서 더 쉽게 테스트
• 상태 캡슐화: 상태는 한 곳에서만 업데이트할 수 있고 컴포저블의 상태에 관한 정보 소스가 하나뿐이므로 일관되지 않은 상태로 인해 버그를 만들 가능성이 작다.
• UI 일관성: 관찰 가능한 상태 홀더(StateFlow 또는 LiveData)를 사용함으로써 모든 상태 업데이트가 UI에 즉시 반영