Post

VUE-SLOT

Posted Updated
By
8 min read
VUE-SLOT

Vue.js의 슬롯(slot)과 SwiftUI의 뷰 컴포지션(View Composition)은 서로 다른 기술 스택(Vue는 웹 프레임워크, SwiftUI는 iOS/macOS UI 프레임워크)에 속하지만, 공통점을 찾을 수 있습니다. 두 시스템 모두 재사용 가능한 컴포넌트를 만들고, 콘텐츠를 동적으로 삽입하며, 유연한 UI 설계를 가능하게 한다는 점에서 비슷한 철학을 공유합니다. 아래에서 주요 공통점을 구체적으로 살펴보겠습니다.

1. 콘텐츠 삽입과 재사용성

  • Vue 슬롯: 슬롯은 부모 컴포넌트가 자식 컴포넌트에 동적으로 콘텐츠를 주입할 수 있게 해줍니다. 자식 컴포넌트는 구조를 정의하고, 부모가 그 안을 채웁니다.
  • SwiftUI: SwiftUI에서는 @ViewBuilder나 클로저를 사용해 부모 뷰가 자식 뷰에 커스텀 콘텐츠를 전달합니다. 예를 들어, VStack이나 HStack 같은 컨테이너 뷰 안에 자식 뷰를 동적으로 삽입할 수 있습니다.

예시 비교:

Vue (슬롯):

1
2
3
4
5

<template>
  <child-component>
    <p>부모에서 주입된 콘텐츠</p>
  </child-component>
</template>

SwiftUI (클로저):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

struct ParentView: View {
    var body: some View {
        ChildView {
            Text("부모에서 주입된 콘텐츠")
        }
    }
}

struct ChildView<Content: View>: View {
    let content: Content
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    var body: some View {
        VStack {
            Text("자식 뷰의 구조")
            content
        }
    }
}

공통점: 둘 다 부모가 자식에게 콘텐츠를 주입하며, 자식은 그 콘텐츠를 특정 위치에 렌더링합니다.

2. 구성 기반 설계 (Composition)

  • Vue: 슬롯을 사용하면 컴포넌트를 더 작은 단위로 나누고, 필요에 따라 조합할 수 있습니다. 이름이 있는 슬롯이나 스코프드 슬롯으로 더 세밀한 제어가 가능합니다.
  • SwiftUI: SwiftUI는 선언적이고 구성적인 뷰 설계를 기반으로 하며, 뷰를 중첩하고 조합해 복잡한 UI를 만듭니다. 클로저를 통해 부모가 자식 뷰의 세부 사항을 커스터마이징할 수 있습니다.

공통점:

두 프레임워크 모두 상속 대신 조합(composition)을 통해 유연성과 재사용성을 극대화합니다.

3. 데이터 바인딩과 스코핑

  • Vue (스코프드 슬롯): 자식 컴포넌트가 데이터를 슬롯에 바인딩하고, 부모가 그 데이터를 받아 원하는 방식으로 렌더링할 수 있습니다.
  • SwiftUI: @Binding이나 클로저를 통해 자식 뷰가 부모 뷰와 데이터를 공유하며, 부모가 그 데이터를 기반으로 UI를 커스터마이징할 수 있습니다.

예시 비교:

Vue (스코프드 슬롯):

1
2
3
4
5
6
7

<template>
  <child-component>
    <template v-slot="{ item }">
      
    </template>
  </child-component>
</template>

SwiftUI (Binding):

1
2
3
4
5
6
7
8
9
10
11
12
13

struct ChildView: View {
    @Binding var item: String
    var body: some View {
        Text(item)
    }
}

struct ParentView: View {
    @State private var item = "사과"
    var body: some View {
        ChildView(item: $item)
    }
}

공통점: 자식에서 제공한 데이터를 부모가 활용해 UI를 동적으로 구성할 수 있습니다.

4. 기본값 제공

  • Vue: 슬롯에 기본 콘텐츠를 설정할 수 있어, 부모가 콘텐츠를 제공하지 않으면 기본값이 렌더링됩니다.
  • SwiftUI: @ViewBuilder를 사용할 때 기본 콘텐츠를 정의하거나, 옵셔널한 클로저를 통해 기본 UI를 제공할 수 있습니다.

예시 비교:

Vue:

1

<slot>기본 콘텐츠</slot>

SwiftUI:

1
2
3
4
5
6
7
8
9

struct ChildView<Content: View>: View {
    let content: Content?
    init(@ViewBuilder content: () -> Content? = { Text("기본 콘텐츠") }) {
        self.content = content()
    }
    var body: some View {
        content ?? Text("기본 콘텐츠")
    }
}

공통점: 부모가 콘텐츠를 제공하지 않을 경우를 대비한 대체 콘텐츠를 정의할 수 있습니다.

5. 선언적 문법

  • Vue: HTML 기반의 템플릿 문법으로 슬롯을 선언하며, 직관적이고 선언적입니다.
  • SwiftUI: Swift 기반의 선언적 문법으로 뷰를 구성하며, 코드로 UI를 명시적으로 정의합니다.

공통점: 둘 다 “무엇을” 보여줄지 선언적으로 작성하며, “어떻게” 렌더링되는지는 프레임워크가 처리합니다.

차이점 간략 언급

물론 차이도 존재합니다:

  • 플랫폼: Vue는 웹, SwiftUI는 Apple 생태계에 특화됨.
  • 구현 방식: Vue는 HTML과 JavaScript로, SwiftUI는 Swift로 작성됨.
  • 스코핑 범위: Vue의 스코프드 슬롯은 데이터 전달에 중점을 두고, SwiftUI는 @State, @Binding 등으로 더 강력한 상태 관리 시스템을 제공함.

결론

Vue의 슬롯과 SwiftUI는 재사용 가능한 컴포넌트에 동적 콘텐츠를 주입하고, 구성 기반으로 UI를 설계하며, 부모와 자식 간 데이터 공유를 가능하게 한다는 점에서 공통점을 가집니다. 둘 다 개발자가 복잡한 UI를 간결하고 유연하게 만들 수 있도록 도와주는 도구로, 목적과 철학이 비슷하다고 볼 수 있습니다. 추가로 궁금한 점 있으면 말씀해주세요!

slot
This post is licensed under CC BY 4.0 by the author.