2024.6.28.md

Compose 활용

• Dialog
• DropdownMenu
• SnackBar
• BottomAppBar
• State, State Hoisting

Dialog

기본적으로 AlertDialog() 형태

여기에 onDismissRequest, confirmButton, dismissButton, title, text를 설정해야 함. 모두 Slot Api

만약 Custom Dialog를 만들고 싶다면 Dialog()를 사용하여 content에 원하는 디자인대로 넣으면 된다.

예시.

  Dialog(onDismissReqeust = {
    //Dialog 영역 밖 터치 시 이벤트
  }) {
    Surface = {
      // content 원하는 디자인!
    }
  }

DropdownMenu

딱히 어려운 부분이 없어 사용 예시 코드만

DropdownMenu(
  expanded = //펼처짐 여부 true -> 펼쳐짐, false -> 접힘
  onDismissRequest = {
    //DropdownMenu 영역 밖 터치 시 이벤트
  }
) {
  DropdownMenuItem(onClick = {
    //메뉴 클릭 시 이벤트
  }) {
    //메뉴 content 보통 Text가 들어감
  }

SnackBar

SnackBar를 처음 봤을 때 이거 Toast 대신해서 써야 하는건가? 라는 생각이 들었다.

다만 조사를 해 보니 꼭 그렇지만은 않았다. Custom Toast

따라서 둘 다 커스텀이 수월하게 가능하니 간단한 유저 반응을 체크해야 한다면 SnackBar, 그게 아니라면 Toast를 사용하면 될 것 같다

BottomAppBar

이것도 SnackBar와 마찬가지로 이걸로 bottom navigation을 만드는건가 했더니 그 방법은 따로 있어서 해당 컴포넌트는 쓸 일이 별로 없을 것 같다. Bottom Navigation 만들기 예시

State Hoisting

State hoisting은 상태를 하위 컴포저블에서 상위 컴포저블로 끌어올려 상위 컴포저블이 상태를 관리하게 하는 패턴.

해당 디자인 패턴을 적용한다면 코드의 재사용성이 높아지고, 테스트가 용이해짐

예시.

@Composable
fun CounterApp() {
    var count by remember { mutableStateOf(0) }
    Counter(count, { newCount -> count = newCount })
}

@Composable
fun Counter(count: Int, onIncrement: (Int) -> Unit) {
    Column {
        Text("Count: $count")
        Button(onClick = { onIncrement(count + 1) }) {
            Text("Increment")
        }
    }
}