Android Academy · 강의

Composable이란 무엇인가요?

UI를 설명하는 함수를 배워 보세요.

Composable이란 무엇인가요?은(는) CoddyKit의 무료 Android Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Android Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Android Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

Composable이란 무엇인가요?

Jetpack Compose에서는 XML 레이아웃을 부풀리는 대신 함수를 작성해 화면을 만듭니다. Composable은 사용자 인터페이스의 일부를 설명하는 Kotlin 함수일 뿐입니다.

이러한 함수에는 @Composable 주석을 붙입니다. 그러면 Compose 컴파일러는 이 함수가 UI를 내보내고 다른 composable 함수를 호출할 수 있다는 것을 알게 됩니다.

@Composable 주석

함수 위에 @Composable을 추가하면 Compose의 강력한 기능을 사용할 수 있습니다. 함수 안에서 Text나 Column과 같은 다른 composable을 호출할 수 있습니다.

관례상 composable 함수 이름은 class와 마찬가지로 대문자로 시작합니다. 따라서 코드에서 UI 함수를 쉽게 찾을 수 있습니다.

@Composable
fun Greeting() {
    Text("Hello, Compose!")
}

Kotlin으로 설명하는 UI

composable은 View 객체를 반환하지 않습니다. 대신 Compose가 실행할 때 부수 효과로 UI를 내보냅니다. 화면에 무엇이 나타나야 하는지만 설명하면 됩니다.

이를 선언적 방식이라고 합니다. 현재 데이터에서 UI가 어떻게 보여야 하는지 선언하면 Compose가 그리는 방법을 알아서 결정합니다.

@Composable
fun WelcomeMessage() {
    Text("Welcome back!")
}

Composable이 composable 호출하기

진정한 강점은 중첩에서 나옵니다. composable은 다른 composable을 호출할 수 있으므로 작고 재사용 가능한 요소를 조합해 복잡한 화면을 만들 수 있습니다.

여기서는 부모 composable이 자식 composable을 호출합니다. Compose는 위에서 아래 순서로 실행하고 내보낸 UI를 배치합니다.

@Composable
fun Header() {
    Text("My App")
}

@Composable
fun Screen() {
    Header()
}

반환 값이 없는 함수

대부분의 composable은 Unit을 반환하며, 이는 유용한 값을 반환하지 않는다는 뜻입니다. composable의 역할은 값을 전달하는 것이 아니라 UI를 내보내는 것입니다.

따라서 composable은 결과를 저장하려고 호출하는 것이 아니라 화면에 미치는 효과를 위해 호출합니다. 일반 함수와는 다르게 느껴지지만 곧 자연스러워집니다.

@Composable
fun Footer() {
    Text("\u00A9 2024 CoddyKit")
}

매개변수로 데이터 전달하기

composable은 일반 Kotlin 함수처럼 매개변수를 받을 수 있습니다. 이를 통해 같은 composable로 서로 다른 데이터를 표시할 수 있습니다.

여기서 Greeting은 name을 받아 화면에 표시합니다. 데이터를 전달하면 앱 전체에서 composable을 유연하고 재사용 가능하게 만들 수 있습니다.

@Composable
fun Greeting(name: String) {
    Text("Hello, " + name + "!")
}

Composable 재사용하기

composable은 함수이므로 서로 다른 인수로 여러 번 호출할 수 있습니다. 호출할 때마다 자체 UI 사본을 내보냅니다.

이렇게 하면 같은 코드를 반복하지 않아도 됩니다. UI를 한 번 작성한 다음 필요한 곳에서 재사용하세요.

@Composable
fun NameList() {
    Greeting("Ada")
    Greeting("Linus")
}

Composable이 위치하는 곳

setContent를 사용해 Android 활동 안에 composable을 배치합니다. 이 블록은 Compose가 화면을 제어하기 시작하는 진입점입니다.

setContent 안에서 최상위 composable을 호출하면, 이 composable이 내보내는 모든 것이 앱의 UI가 됩니다.

setContent {
    Greeting("World")
}

재구성 기초

composable이 읽는 데이터가 변경되면 Compose는 화면을 업데이트하기 위해 해당 함수를 다시 실행합니다. 이 재실행을 재구성이라고 합니다.

UI를 직접 업데이트할 필요가 없습니다. 데이터를 변경하면 Compose가 영향을 받는 composable을 자동으로 재구성합니다. 이를 통해 화면이 상태와 동기화됩니다.

Composable을 작게 유지하기

각 composable이 하나의 명확한 작업만 수행하도록 만드는 것이 좋은 습관입니다. 작고 집중된 composable은 읽고, 테스트하고, 재사용하기 쉽습니다.

함수가 너무 커지면 더 작은 composable로 나누고 함께 호출하세요. 미래의 자신이 고마워할 것입니다.

@Composable
fun ProfileHeader(name: String) {
    Text(name)
}

보게 될 가져오기

composable은 Compose 라이브러리에서 제공됩니다. 주석에는 androidx.compose.runtime.Composable을, 텍스트에는 androidx.compose.material3.Text를 자주 가져옵니다.

Android Studio가 보통 이러한 가져오기를 자동으로 추가합니다. 가져오기가 누락되었을 때 출처를 알고 있으면 도움이 됩니다.

import androidx.compose.runtime.Composable
import androidx.compose.material3.Text

빠른 확인

함수를 composable로 만드는 요소를 복습해 보세요.

요약

composable은 @Composable이 표시된 Kotlin 함수이며, UI를 선언적으로 설명한다는 것을 배웠습니다. composable은 매개변수를 받고 다른 composable을 호출할 수 있으며 이름은 대문자로 시작합니다.

composable은 Unit을 반환하고 값 대신 UI를 내보냅니다. 데이터가 변경되면 Compose가 composable을 재구성해 화면을 업데이트합니다. 다음에는 실제 텍스트를 표시하고 Column으로 뷰를 쌓아 보겠습니다.

자주 묻는 질문

“Composable이란 무엇인가요?” 강의는 무료인가요?

네 — “Composable이란 무엇인가요?” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Android Academy 강의 전체를 잠금 해제할 수 있습니다. Android Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Composable이란 무엇인가요?”에서 뭘 배우나요?

UI를 설명하는 함수를 배워 보세요. 브라우저에서 직접 실행하는 실습 코드로 Android Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Android Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Android Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“Composable이란 무엇인가요?” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Android Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Android Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Android Academy(으)로 돌아가기