🗨️ Composable Convention

스크린에 대한 최상위 Composable의 네이밍은 ~ScreenContainer() 으로 가져갑니다.

• Example

이때 ScreenContainer의 파라미터에 뷰모델을 지정하고, state의 구독을 이곳에서 시작합니다.

@Composable
fun SignInScreenContainer(
    modifier: Modifier = Modifier,
    viewModel: SignInViewModel = viewModel()
) {
    val uiState by viewModel.collectAsState()
    ...
}

ScreenContainer의 하위 Composable로 Screen()를 정의하고 ScreenContainer에 이를 선언합니다.

@Composable
fun SignInScreen(
    uiState: SignInUiState,
    modifier: Modifier = Modifier
) {
    // 여기부터 본격적으로 UI 로직 작성
}

@Composable
fun SignInScreenContainer(
    modifier: Modifier = Modifier,
    viewModel: SignInViewModel = viewModel()
) {
    val uiState by viewModel.collectAsState()
    
    SignInScreen(
        uiState = uiState,
        modifier = Modifier.fillMaxSize()
    )
    
    viewModel.collectSideEffect {
        ...
    }
}

Screen이 아닌 ScreenContent에 대한 프리뷰를 생성합니다. 이런 식으로 뷰모델과 렌더링할 UI 로직을 분리함으로써 프리뷰가 원활히 동작하도록 합니다.

@Preview
@Composable
private fun SignInScreenPreview() {
    SignInScreen(...)
}

🧐 Route가 아닌 ScreenContainer를 네이밍으로 가져가는 이유

SOPT 내에선 최상위 Composable의 네이밍을 ~Route()로 가져가는 것 같습니다. 그런데 네비게이션 경로 명도 ~Route로 작성하는 경우가 많기에, 혼동이 생길 수 있습니다. 따라서 혼동을 최소화하기 위해 위와 같은 방식을 차용합니다.

@Serializable
sealed interface OnboardingRoute {

    @Serializable
    data object ChoosePlace: OnboardingRoute

    @Serializable
    data object ChooseFoods: OnboardingRoute
}
...

@Composable
fun OnboardingRoute() { ... }