SwiftUI 빈 공간에 사용하는 Color.clear 와 EmptyView

오늘은 SwiftUI에서 빈공간에 사용하는,

Color.clear와 EmptyView에 대해 정리하겠습니다.

 

1. Color.clear와 EmptyView

Color.clear와 EmptyView()는,

둘다 시각적으로 보이지 않는 요소를 만들 때 사용되는데요.

 

하지만 실제 사용할 때 둘은 큰 차이가 있습니다.

 

	Color.clear	EmptyView
주요 용도	투명 오버레이, 공간 예약, 이벤트 캡처	아무것도 표시 안 함을 명시적으로 나타낼 때 사용
공간 차지	지정된 크기의 공간을 차지함 지정하지 않으면, 부모 뷰가 제공하는 공간을 채움	공간을 전혀 차지하지 않음
사용자 상호작용	가능 (.contentShape 등으로 설정 가능)	공간이 없어 불가능
Modifer적용	가능	대부분 불가능
onAppear/ onDisappear	트리거 됨	트리거되지 않음
타입	Color	View

 

 

EmptyView는 말 그대로 비어있는,

아무것도 없는 공간이고요.

Color.clear는 부모가 차지하는 공간 혹은 지정된 공간을 차지합니다.

 

따라서,

빈 공간이 필요하거나 이벤트 처리가 필요한 경우 Color.clear를,

아무것도 렌더링하지 않아야 할 때는 EmptyView()를 사용하는 것이 적합합니다.

 

2. 사용예

2-1. Color.clear

Color.clear는 아래와 같이,

투명하게 공간을 차지하면서,

유저의 탭제스쳐 캡처용으로 사용할 수 있습니다.

 

ZStack {
    backgroundContent
    
    // 전체 화면을 덮는 투명한 레이어 (클릭/탭 이벤트 캡처용)
    Color.clear
        .contentShape(Rectangle())
        .onTapGesture {
            hideKeyboard()
        }
}

 

2-2. EmptyView

EmptyView는 아래와 같이,

조건에 따라서,

뷰를 표시하거나 아무것도 표시하지 않을 때 사용합니다.

 

VStack {
    if shouldShowContent {
        ContentView()
    } else {
        EmptyView()
    }
}

 

 

사실은 아래와 같이,

else를 생략해버려도 문제는 없습니다.

사용하면 좀 더 명시적이라는 것 뿐이지요.

 

VStack {
    if shouldShowContent {
        ContentView()
    }
}

 

SwiftUI는 기본 UI를 커스텀하게 변경할 때,

다양한 방법을 동원하기도 하는데요.

이 방법중에는,

ZStack으로 감싸주고,

내부의 넣어야 할 부분을 비워두고,

바깥에서 View를 선언해서 사용하는 방법도 있습니다.

 

원래대로라면 넣어야 하는 부분에,

코드를 비워두고 바깥에 선언해서 사용할 경우,

이런 EmptyView()로 해당 부분을 의도적으로 비웠음을 명시하고,

커스텀뷰를 사용하는 경우에 유용하겠지요.