안드로이드 컴포즈 기반 개발 어려운게 없다.

컴퍼저블로 시작해서 컴퍼저블로 끝난다.

개인적으로 여러 ui 선언 방식 중에 컴퍼저블이 제일 깔끔하고 쓰기가 쉽다고 생각한다.

컴포즈의 경우 ui 함수형 선언방식이고, 스위프트ui 경우 구조체 선언방식이다. 그래서 class 스타일을 가져간다.

그나마 컴퍼저블이랑 리액트 컴포넌트랑 비슷하지 않을까?

package com.buyoungsil.checkcheck.feature.group.presentation.list

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.ExitToApp
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.hilt.navigation.compose.hiltViewModel
import com.buyoungsil.checkcheck.feature.group.domain.model.Group

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun GroupCard(
    group: Group,
    onClick: () -> Unit,
    onLeave: () -> Unit
) {
    Card(
        modifier = Modifier.fillMaxWidth(),
        onClick = onClick
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(
                text = group.icon,
                style = MaterialTheme.typography.headlineMedium,
                modifier = Modifier.padding(end = 16.dp)
            )

            Column(modifier = Modifier.weight(1f)) {
                Text(
                    text = group.name,
                    style = MaterialTheme.typography.titleMedium,
                    fontWeight = FontWeight.Bold
                )
                Text(
                    text = "${group.type.displayName} · ${group.memberIds.size}명",
                    style = MaterialTheme.typography.bodySmall,
                    color = MaterialTheme.colorScheme.onSurfaceVariant
                )
                Text(
                    text = "초대코드: ${group.inviteCode}",
                    style = MaterialTheme.typography.bodySmall,
                    color = MaterialTheme.colorScheme.primary
                )
            }

            IconButton(onClick = onLeave) {
                Icon(
                    imageVector = Icons.Default.ExitToApp,
                    contentDescription = "나가기",
                    tint = MaterialTheme.colorScheme.error
                )
            }
        }
    }
}

이해를 돕기 위해 사용중인 컴퍼저블 코드를 하나 가져왔다.

컴퍼저블은 함수형 ui이다.

함수는 알다시피 투입 -> 과정 -> 결과 형태를 뛴다.

여기서 투입은 파라미러 group, onclik. onLeave 라는 것을 넣었을 때

GroupCard라는 ui 결과가 생성되는 것이다.

근데 투입에는 여러 종류가 있다.

변수를 내려보낼 수 있고, 아니면 람다 즉 콜백함수를 내려보낼 수 있다.

콜백 함수라는건 요청이 있고 되돌아오는 것이 있다는 뜻이다.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun GroupCard(
    group: Group,
    onClick: () -> Unit,
    onLeave: () -> Unit
) {
    Card(
        modifier = Modifier.fillMaxWidth(),
        onClick = onClick
    ) {
            IconButton(onClick = onLeave) {
                Icon(
                    imageVector = Icons.Default.ExitToApp,
                    contentDescription = "나가기",
                    tint = MaterialTheme.colorScheme.error
                )
            }
        }
    }
}

자 여기서 onclick 이라는 콜백함수가 있다. card에서 onclick를 눌렀을 때 콜백함수가 호출되고 이 로직은 상위뷰로 전달된다.

GroupCard(
    group = group,
    onClick = { onNavigateToDetail(group.id) },
    onLeave = { viewModel.onLeaveGroup(group.id) }
)

이렇게 상위 뷰에서 onclick으로 onNavigateToDetail(group.id) 이거 실행해줘 라는 뜻이 되는 것이다.

자 그럼 우린 생각할 수 있다. 이건 이벤트만 호출한 것이고 콜백함수에 다른 값들을 추가해서 올려 보낼 수 있겠구나?

맞다.

예를들어
@composable
fun Test(
onClick: (string) -> Unit​
)​

Test(
onClick = { string ->

}
)​

이런식으로 사용할 수 있게 된다.