9. 상태 호이스팅 (Jetpack Compose UI 코틀린 앱 개발 강의)

 

---

<구글이 알려주는 앱 개발 무료 강의>

[Jetpack Compose] 가이드 맵 - 전체 보기

---

 

9. 상태 호이스팅

 

상태 호이스팅은 Compose에서 중복되는 상태를 방지하고 버그를 줄이며 컴포저블의 재사용성을 높이는 중요한 개념입니다.

1. 상태(State) 호이스팅이란?
   • 여러 컴포저블에서 공유되는 상태는 해당 상태를 컴포저블의 상위 항목에 위치시켜야 합니다.
   • 상태를 공통 상위 요소로 이동하여 상태가 중복되지 않고 버그가 발생하지 않도록 합니다.
2. 상태를 이동하는 이유
   • 코드의 일관성과 가독성을 유지하고 버그를 방지합니다.
   • 컴포저블을 재사용할 수 있도록 합니다.
   • 테스트가 쉬워집니다.
3. 상태를 호이스팅하는 방법
   • 컴포저블에서 사용하는 상태를 해당 컴포저블 바깥으로 이동합니다.
   • 필요한 경우 함수를 통해 콜백을 전달하여 상태를 변경할 수 있도록 합니다.
4. 예시: 온보딩 화면
   • 앱의 온보딩 화면을 만들어볼 때, 온보딩 화면에서 사용하는 상태를 공통 상위 요소로 이동합니다.
   • 상태를 변경하기 위해 콜백을 사용하여 함수를 전달합니다.
5. 코드 예시
   • MyApp 컴포저블에서 온보딩 화면을 표시하고, 온보딩이 완료되면 인사말을 표시합니다.
   • shouldShowOnboarding 상태를 공통 상위 요소로 이동하고, 온보딩 화면의 버튼 클릭 이벤트에 대한 콜백을 전달합니다.

 

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            BasicsCodelabTheme {
                MyApp(modifier = Modifier.fillMaxSize())
            }
        }
    }
}

@Composable
fun MyApp(modifier: Modifier = Modifier) {

    var shouldShowOnboarding by remember { mutableStateOf(true) }

    Surface(modifier) {
        if (shouldShowOnboarding) {
            OnboardingScreen(onContinueClicked = { shouldShowOnboarding = false })
        } else {
            Greetings()
        }
    }
}

@Composable
fun OnboardingScreen(
    onContinueClicked: () -> Unit,
    modifier: Modifier = Modifier
) {

    Column(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Welcome to the Basics Codelab!")
        Button(
            modifier = Modifier.padding(vertical = 24.dp),
            onClick = onContinueClicked
        ) {
            Text("Continue")
        }
    }
}

@Composable
private fun Greetings(
    modifier: Modifier = Modifier,
    names: List<String> = listOf("World", "Compose")
) {
    Column(modifier = modifier.padding(vertical = 4.dp)) {
        for (name in names) {
            Greeting(name = name)
        }
    }
}

 

 

 

 

이와 같은 방식으로 상태를 호이스팅하여 코드의 일관성을 유지하고 버그를 방지할 수 있습니다. Compose에서 상태를 효과적으로 관리하여 UI를 더욱 유연하고 견고하게 만들어보세요!

---

• [Jetpack Compose] 가이드 맵으로 돌아가기