SwiftUI - SwiftUI 모드로 Xcode 이용

프리뷰 캔버스 (preview canvas)

• 사용자 인터페이스 설계에 대한 시각적 표시와 함께 레이아웃 내에 뷰를 추가하거나 수정할 수 있는 도구 제공
• 시뮬레이터 없이 앱 테스트 가능

 

 

 

 

화면 설계 수정하기

• 다른 뷰 추가, 수정자(modifier)를 이용하여 뷰 수정, 로직 추가 후 상태와 다른 데이터 객체 바인딩 등 가능
• 이러한 작업 모두 구조체를 수정하는 방식으로 진행됨

 

ex) ‘Hello View’ 텍스트 추가

• 폰트는 에디터 내에 적절한 수정자를 추가하여 변경

Text("Hello, world!")
     .font(.largeTitle)

 

 

 

 

 

 

에디터 콘텍스트 메뉴

• control + 코드 에디터 항목 클릭
• 선택한 항목의 타입에 따라 달라지는 메뉴 제공
• 현재 뷰에 대한 애트리뷰트 인스펙터의 팝업 버전
• 자신에게 속한 하위 뷰에 있는 뷰를 추출할 때 유용 → 재사용성, 성능 개선

 

 

 

 

 

 

 

 

여러 디바이스에서 미리보기

• https://www.hohyeonmoon.com/blog/swiftui-tutorial-preview/
• 디폴트 코드

#Preview {
    ContentView()
}

 

 

 

 

• 그루핑하여 여러 디바이스 타입 동시 미리보기

#Preview("iPhone SE") {
    ContentView()
}

#Preview("iPhone 11") {
    ContentView()
}

struct ContentView_Previews : PreviewProvider {
    static var previews: some View{
        Group{
            ContentView()
                .previewDevice("iPhone SE (3rd generation)")
                .previewDisplayName("iPhone SE")
            ContentView()
                .previewDevice("iPhone 11")
                .previewDisplayName("iPhone 11")
        }
    }
}