컴포저블 코드 살펴보기

이 튜토리얼은 IntelliJ IDEA를 사용하지만, Android Studio에서도 따라 할 수 있습니다. 두 IDE 모두 동일한 핵심 기능과 Kotlin Multiplatform 지원을 공유합니다.

이 튜토리얼은 공유 로직 및 UI로 Compose Multiplatform 앱 만들기 튜토리얼의 두 번째 파트입니다. 계속 진행하기 전에 이전 단계를 완료했는지 확인하세요.

Compose Multiplatform 앱 만들기

이 튜토리얼은 IntelliJ IDEA를 사용하지만, Android Studio에서도 따라 할 수 있습니다. 두 IDE는 동일한 핵심 기능과 Kotlin Multiplatform 지원을 공유합니다. 이 튜토리얼은 '공유 로직 및 UI로 Compose Multiplatform 앱 만들기' 튜토리얼의 첫 번째 파트입니다. Compose Multiplatform 앱 만들기 컴포저블 코드 살펴보기 프로젝트 수정하기 나만의 애플리케이션 만들기

컴포저블 코드 살펴보기
프로젝트 수정하기

나만의 애플리케이션 만들기

Kotlin Multiplatform 위자드가 생성한 샘플 컴포저블을 자세히 살펴보겠습니다. 첫째, 공통 UI를 구현하고 모든 플랫폼에서 사용할 수 있는 컴포저블 App() 함수가 있습니다. 둘째, 각 플랫폼에서 이 UI를 실행하는 플랫폼별 코드가 있습니다.

컴포저블 함수 구현하기

composeApp/src/commonMain/kotlin/App.kt 파일에서 App() 함수를 살펴보세요.

@Composable
@Preview
fun App() {
  MaterialTheme {
    var showContent by remember { mutableStateOf(false) }
    Column(
      modifier = Modifier
        .safeContentPadding()
        .fillMaxSize(),
      horizontalAlignment = Alignment.CenterHorizontally,
    ) {
      Button(onClick = { showContent = !showContent }) {
        Text("Click me!")
      }
      AnimatedVisibility(showContent) {
        val greeting = remember { Greeting().greet() }
        Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
          Image(painterResource(Res.drawable.compose_multiplatform), null)
          Text("Compose: $greeting")
        }
      }
    }
  }
}

App() 함수는 @Composable 어노테이션이 지정된 일반 Kotlin 함수입니다. 이러한 종류의 함수를 컴포저블 함수 또는 단순히 _컴포저블_이라고 합니다. 이들은 Compose Multiplatform을 기반으로 하는 UI의 구성 요소입니다.

컴포저블 함수는 다음과 같은 일반적인 구조를 가집니다.

• MaterialTheme은 애플리케이션의 모양을 설정합니다. 기본 설정은 사용자 정의할 수 있습니다. 예를 들어, 색상, 모양 및 타이포그래피를 선택할 수 있습니다.
• Column 컴포저블은 애플리케이션의 레이아웃을 제어합니다. 여기서는 AnimatedVisibility 컴포저블 위에 Button을 표시합니다.
• Button에는 일부 텍스트를 렌더링하는 Text 컴포저블이 포함됩니다.
• AnimatedVisibility는 애니메이션을 사용하여 Image를 표시하거나 숨깁니다.
• painterResource는 XML 리소스에 저장된 벡터 아이콘을 로드합니다.

Column의 horizontalAlignment 파라미터는 콘텐츠를 중앙에 정렬합니다. 그러나 이것이 효과를 내려면 컬럼이 컨테이너의 전체 너비를 차지해야 합니다. 이는 modifier 파라미터를 사용하여 달성됩니다.

수정자(Modifiers)는 Compose Multiplatform의 핵심 구성 요소입니다. 이는 UI에서 컴포저블의 모양이나 동작을 조정하는 데 사용하는 주요 메커니즘입니다. 수정자는 Modifier 타입의 메서드를 사용하여 생성됩니다. 이 메서드들을 체인으로 연결하면, 각 호출이 이전 호출에서 반환된 Modifier를 변경할 수 있으므로 순서가 중요합니다. 자세한 내용은 JetPack Compose 문서를 참조하세요.

상태 관리하기

샘플 컴포저블의 마지막 측면은 상태가 관리되는 방식입니다. App 컴포저블의 showContent 속성은 mutableStateOf() 함수를 사용하여 빌드됩니다. 이는 관찰할 수 있는 상태 객체임을 의미합니다.

var showContent by remember { mutableStateOf(false) }

상태 객체는 remember() 함수 호출로 래핑되어 한 번 빌드된 다음 프레임워크에 의해 유지됩니다. 이를 실행하면 값이 부울을 포함하는 상태 객체인 속성을 생성하게 됩니다. 프레임워크는 이 상태 객체를 캐시하여 컴포저블이 이를 관찰할 수 있도록 합니다.

상태의 값이 변경되면 이를 관찰하는 모든 컴포저블이 다시 호출됩니다. 이를 통해 생성된 위젯이 다시 그려질 수 있습니다. 이를 _리컴포지션_이라고 합니다.

애플리케이션에서 상태가 변경되는 유일한 곳은 버튼의 클릭 이벤트입니다. onClick 이벤트 핸들러는 showContent 속성의 값을 전환합니다. 결과적으로 부모 AnimatedVisibility 컴포저블이 showContent를 관찰하기 때문에 Greeting().greet() 호출과 함께 이미지가 표시되거나 숨겨집니다.

다른 플랫폼에서 UI 실행하기

App() 함수 실행은 플랫폼마다 다릅니다. Android에서는 액티비티로, iOS에서는 뷰 컨트롤러로, 데스크톱에서는 창으로, 웹에서는 컨테이너로 관리됩니다. 각각을 살펴보겠습니다.

Android에서

Android의 경우, composeApp/src/androidMain/kotlin 파일에서 MainActivity.kt를 엽니다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        enableEdgeToEdge()
        super.onCreate(savedInstanceState)

        setContent {
            App()
        }
    }
}

이것은 App 컴포저블을 호출하는 MainActivity라는 Android 액티비티입니다.

iOS에서

iOS의 경우, composeApp/src/iosMain/kotlin 파일에서 MainViewController.kt를 엽니다.

fun MainViewController() = ComposeUIViewController { App() }

이것은 Android의 액티비티와 동일한 역할을 수행하는 뷰 컨트롤러입니다. iOS와 Android 타입 모두 단순히 App 컴포저블을 호출한다는 점에 유의하세요.

데스크톱에서

데스크톱의 경우, composeApp/src/desktopMain/kotlin 파일에서 main() 함수를 살펴보세요.

fun main() = application {
    Window(onCloseRequest = ::exitApplication, title = "ComposeDemo") {
        App()
    }
}

• 여기서 application() 함수는 새로운 데스크톱 애플리케이션을 실행합니다.
• 이 함수는 UI를 초기화하는 람다를 받습니다. 일반적으로 Window를 생성하고 창이 닫힐 때 프로그램이 어떻게 반응해야 하는지를 지시하는 속성과 명령을 지정합니다. 이 경우 전체 애플리케이션이 종료됩니다.
• 이 창 안에 콘텐츠를 배치할 수 있습니다. Android 및 iOS와 마찬가지로 유일한 콘텐츠는 App() 함수입니다.

현재 App 함수는 어떤 파라미터도 선언하지 않습니다. 더 큰 애플리케이션에서는 일반적으로 플랫폼별 종속성에 파라미터를 전달합니다. 이러한 종속성은 직접 생성하거나 의존성 주입 라이브러리를 사용하여 생성할 수 있습니다.

웹에서

composeApp/src/wasmJsMain/kotlin/main.kt 파일에서 main() 함수를 살펴보세요.

@OptIn(ExperimentalComposeUiApi::class)
fun main() {
    ComposeViewport(document.body!!) { App() }
}

• @OptIn(ExperimentalComposeUiApi::class) 어노테이션은 실험용으로 표시되었으며 향후 릴리스에서 변경될 수 있는 API를 사용하고 있음을 컴파일러에 알립니다.
• ComposeViewport() 함수는 애플리케이션의 Compose 환경을 설정합니다.
• 웹 앱은 ComposeViewport 함수의 파라미터로 지정된 컨테이너에 삽입됩니다. 이 예제에서는 문서의 전체 본문이 컨테이너로 작동합니다.
• App() 함수는 Jetpack Compose를 사용하여 애플리케이션의 UI 컴포넌트를 빌드하는 역할을 합니다.

다음 단계

튜토리얼의 다음 부분에서는 프로젝트에 종속성을 추가하고 사용자 인터페이스를 수정할 것입니다.

다음 파트로 진행하기

도움 받기

• Kotlin Slack. 초대 받기 및 #multiplatform 채널에 참여하세요.
• Kotlin 이슈 트래커. 새 이슈 보고하기.