Compose와 SwiftUI 기본 구조 - Composable 함수와 View 구조체

비교를 위해 UI 정의와 함수 구조를 유사하게 구현했으며,

두 플랫폼 모두 GreetingView에서 이름을 인자로 받아, 그 값을 MainScreen 화면에 텍스트로 표시하는 예제를 작성해봤다.

Android Compose의 @Composable 함수와 SwiftUI의 View 구조체가 각각 비슷한 역할을 수행한다.

---

Android Compose의 Composable 함수

• @Composable 어노테이션을 사용해 함수로 UI를 정의한다.
• 각 UI 컴포넌트는 재사용 가능한 함수로 만들 수 있으며, 컴포저블 함수는 컴포지션에 참여해 UI 트리를 형성한다.

예시 코드:

@Composable
fun MainScreen() {
    // MainScreen에서 GreetingView 컴포저블을 호출하고 문자열을 전달
    GreetingView("Android Compose")
}

@Composable
fun GreetingView(name: String) {
    // GreetingView 컴포저블에서 Text를 사용해 텍스트를 표시
    Text(text = "Hello, $name!")
}

 

 

📝 추가 설명:

• Text
  • Text 컴포저블의 반환값은 Unit이다.
  • Android Compose에서는 UI 컴포저블이 호출되면 그 내부의 UI가 그려지고, 해당 UI가 함수의 반환값과 상관없이 처리되는 방식이다.
  • 요약하자면, Android Compose의 Text와 같은 컴포저블 함수는 화면에 UI를 그리지만 반환값은 Unit이다. (=Swift의 Void와 유사한 개념)
  • 같은 맥락으로 @Composable 어노테이션이 달린 컴포저블 함수인 GreetingView도 화면에 UI를 그리지만 반환값은 Unit이다.

Android Compose Preview

---

iOS SwiftUI의 View 구조체

• View 프로토콜을 채택한 구조체로 UI를 정의한다.
• Swift의 struct로 정의하며, SwiftUI의 뷰도 선언적으로 정의할 수 있다.

예시 코드:

struct MainScreen: View {
    var body: some View {
        // MainScreen에서 GreetingView를 호출하고 문자열을 전달
        GreetingView(name: "iOS SwiftUI")
    }
}

struct GreetingView: View {
    var name: String
    
    var body: some View {
        // GreetingView에서 Text를 사용해 텍스트를 표시
        Text("Hello, \(name)!")
    }
}

 

📝 추가 설명:

• some View
  • SwiftUI에서 구체적인 View 타입을 숨기는 추상화로, 코드의 단순화와 유연성을 위해 사용된다.
  • 선언형 UI 프레임워크의 특성상 다양한 컴포넌트를 쉽게 조합하고 상태에 따라 UI가 변하는 상황에서 매우 유용하다.
  • 예시 코드 body 내 Text를 다른 컴포넌트로 바꿔도 된다. 단, 반환하는 뷰는 반드시 하나의 타입으로 통일돼야 한다.
• body 
  • SwiftUI에서 View 프로토콜을 따르는 모든 구조체는 body라는 프로퍼티를 구현해야 한다.
  • body는 SwiftUI에서 렌더링될 UI를 반환하는 역할을 한다.
  • body는 고정된 이름이기 때문에 body1, body2 등 다른 이름으로 변경하게 되면 SwiftUI에서 해당 뷰를 인식하지 못하게 되며, 컴파일 에러가 발생한다.

iOS SwiftUI Preview

---

차이점

• iOS SwiftUI는 View 프로토콜을 따르는 struct로 GreetingView를 정의하고 body를 통해 UI를 반환한다.
• Android Compose는 @Composable 어노테이션을 사용한 함수로 GreetingView를 정의하며, 함수 내부에서 UI 컴포넌트를 반환한다.

---

 

💬 다음 공부는

나는 보통 앱 UI 표시하기 위해 구현하는 항목(?)들을 뷰(View)라고 칭한다. Android Compose에서는 그 뷰가 컴포저블 함수이며, iOS SwiftUI에서는 그 뷰가 View 구조체인 셈이다.

이번에 각 플랫폼에서 기본 구조에 쓰이는 뷰에 대해 알아봤으니 다음번에는 뷰를 컬럼과 로우, 스택 형태로 제공하는 뷰 그룹, 뷰 레이아웃에 대해 공부해볼 예정이다!

---

🔗  GitHub Repository

Compose Components : https://github.com/blueland99/ComposeComponents

SwiftUI Components : https://github.com/blueland99/SwiftUIComponents