SwiftUI 튜토리얼(1)

유재우·2022년 5월 13일

SwiftUI 튜토리얼

목록 보기

1/8

우선 Repository를 만들고 Xcode 프로젝트와 연결한다.

이 블로그 링크에 연결하는 방법이 자세히 나와있으니 모른다면 참고하여 연결한다.

기초적인 SwiftUI에 대한 이해

1. ContentView는 View를 상속받은 한가지의 View를 뜻함
- Text에 (.)을 찍어 Text에 대한 설정을 지정해줄 수 있다.
2. ContentView_Previews는 PreviewProvider를 상속받아 프리뷰 화면을 보여주는 기능을 가졌다.

struct ContentView: View {
    var body: some View {
        Text("안녕하세요!!")
            .padding()
    }
}

struct ContentView: View { // View
    var body: some View {
        Text("안녕하세요!!")
            .fontWeight(.bold) // 안녕하세요!! 텍스트를 굵게 설정
            .font(.largeTitle) // 안녕하세요!! 텍스트를 크게 설정
            .padding()
    }
}

VStack

Vertical Stack으로 안에 있는 내용들이 수직으로 쌓인다.

struct ContentView: View { // View
    var body: some View {
        VStack{ // Vertical Stack으로 수직으로 쌓는다.
            Text("안녕하세요!!")
                .fontWeight(.bold) // 안녕하세요!! 텍스트를 굵게 설정
                .font(.largeTitle) // 안녕하세요!! 텍스트를 크게 설정
                .padding()
        }
    }
}

struct ContentView: View { // View
    var body: some View {
        VStack{ // Vertical Stack으로 수직으로 쌓는다.
            Text("안녕하세요!!")
                .fontWeight(.bold) // 안녕하세요!! 텍스트를 굵게 설정
                .font(.largeTitle) // 안녕하세요!! 텍스트를 크게 설정
                .padding()
            Text("안녕하세요!!")
                .fontWeight(.bold) // 안녕하세요!! 텍스트를 굵게 설정
                .font(.largeTitle) // 안녕하세요!! 텍스트를 크게 설정
                .padding()
            Text("안녕하세요!!")
                .fontWeight(.bold) // 안녕하세요!! 텍스트를 굵게 설정
                .font(.largeTitle) // 안녕하세요!! 텍스트를 크게 설정
                .padding()
        }
    }
}

HStack

VStack과 반대로 HStack은 Horizontal Stack으로 안에 내용들이 수평으로 쌓인다.

struct ContentView: View { // View
    var body: some View {
        HStack{ // Horizontal Stack으로 수직으로 쌓는다.
            Text("1!!")
                .fontWeight(.bold) // 1!! 텍스트를 굵게 설정
                .font(.largeTitle) // 1!! 텍스트를 크게 설정
                .padding()
        }
    }
}

struct ContentView: View { // View
    var body: some View {
        HStack{ // Horizontal Stack으로 수직으로 쌓는다.
            Text("1!!")
                .fontWeight(.bold) // 1!! 텍스트를 굵게 설정
                .font(.largeTitle) // 1!! 텍스트를 크게 설정
                .padding()
            Text("2!!")
                .fontWeight(.bold) // 2!! 텍스트를 굵게 설정
                .font(.largeTitle) // 2!! 텍스트를 크게 설정
                .padding()
            Text("3!!")
                .fontWeight(.bold) // 3!! 텍스트를 굵게 설정
                .font(.largeTitle) // 3!! 텍스트를 크게 설정
                .padding()
        }
    }
}

HStack Or VStack의 설정 바꾸기

Stack이 감싸고 있는 코드블럭 밖에 (.)을 찍어 Stack 자체의 설정을 바꿔줄 수 있다.

struct ContentView: View { // View
    var body: some View {
        HStack{ // Horizontal Stack으로 수직으로 쌓는다.
            Text("1!!")
                .fontWeight(.bold) // 1!! 텍스트를 굵게 설정
                .font(.largeTitle) // 1!! 텍스트를 크게 설정
                .padding()
            Text("2!!")
                .fontWeight(.bold) // 2!! 텍스트를 굵게 설정
                .font(.largeTitle) // 2!! 텍스트를 크게 설정
                .padding()
            Text("3!!")
                .fontWeight(.bold) // 3!! 텍스트를 굵게 설정
                .font(.largeTitle) // 3!! 텍스트를 크게 설정
                .padding()
        } // HStack
        .background(Color.red) // HStack의 배경색을 빨강색으로 지정
    }
}

VStack도 똑같이 적용 되는 모습

HStack 안에 VStack

Stack 안에 Stack을 넣을 수 있다.

struct ContentView: View { // View
    var body: some View {
        HStack{
            // HStack안에 VStack을 3개 넣음
            VStack{ // Vertical Stack으로 수직으로 쌓는다.
                Text("1!!")
                    .fontWeight(.bold) // 1!! 텍스트를 굵게 설정
                    .font(.largeTitle) // 1!! 텍스트를 크게 설정
                    .padding()
                Text("2!!")
                    .fontWeight(.bold) // 2!! 텍스트를 굵게 설정
                    .font(.largeTitle) // 2!! 텍스트를 크게 설정
                    .padding()
                Text("3!!")
                    .fontWeight(.bold) // 3!! 텍스트를 굵게 설정
                    .font(.largeTitle) // 3!! 텍스트를 크게 설정
                    .padding()
            } // VStack
            .background(Color.red) // VStack의 배경색을 빨강색으로 지정
            VStack{ // Vertical Stack으로 수직으로 쌓는다.
                Text("1!!")
                    .fontWeight(.bold) // 1!! 텍스트를 굵게 설정
                    .font(.largeTitle) // 1!! 텍스트를 크게 설정
                    .padding()
                Text("2!!")
                    .fontWeight(.bold) // 2!! 텍스트를 굵게 설정
                    .font(.largeTitle) // 2!! 텍스트를 크게 설정
                    .padding()
                Text("3!!")
                    .fontWeight(.bold) // 3!! 텍스트를 굵게 설정
                    .font(.largeTitle) // 3!! 텍스트를 크게 설정
                    .padding()
            } // VStack
            .background(Color.red) // VStack의 배경색을 빨강색으로 지정
            VStack{ // Vertical Stack으로 수직으로 쌓는다.
                Text("1!!")
                    .fontWeight(.bold) // 1!! 텍스트를 굵게 설정
                    .font(.largeTitle) // 1!! 텍스트를 크게 설정
                    .padding()
                Text("2!!")
                    .fontWeight(.bold) // 2!! 텍스트를 굵게 설정
                    .font(.largeTitle) // 2!! 텍스트를 크게 설정
                    .padding()
                Text("3!!")
                    .fontWeight(.bold) // 3!! 텍스트를 굵게 설정
                    .font(.largeTitle) // 3!! 텍스트를 크게 설정
                    .padding()
            } // VStack
            .background(Color.red) // VStack의 배경색을 빨강색으로 지정
        } // HStack
        .background(Color.blue)
    }
}

} // HStack
        .padding(10) // 이 부분 추가
        .background(Color.blue)

코드를 간편하고 보기 좋게 만들기

위 처럼 코드를 작성하면 나중에 다시 볼때 코드가 길어져서 스크롤 내리기도 피로하고 어떤코드를 고칠 지 찾기 힘들어 이를 해결할 수 있는 방법이 있다.

새로운 struct를 만들어 위에서 쓴 반복되는 VStack을 하나 복사해서 붙여넣는다.

만든 struct를 불러오는 방법

똑같이 적용되는 모습

.swift 파일을 만들어서 더 쉽게 관리하기

위 방법도 좋지만 아예 다른 swift파일을 만들어서 작업할 수도 있다.

따로 파일을 만들어 코드를 복사한다.

처음 만들어준 프리뷰 코드는 이런 식으로 텍스트가 출력되게 만들어진다.

내가 만든 뷰를 띄우기

MyVStackView가 없어도 스스로 찾아서 출력해준다.