SwiftUI : ExtractsubView

오늘은 body 안의 코드를 줄이는 방법에 대해 알아볼 거다 !

요즘 NC1 이후 코드 정리를 하는데에 아쉬움이 남았던 부분들을 공부하는 중인데 하나 둘 포스팅을 하려 한다 !

 

 

 이렇게 3개의 둥근 사각형 View가 있다. 

아래 코드를 보면 알겠지만, 안에 들어가는 값이 달라지며, 3번 반복이 된다.

struct ExtractSubView: View {
    
    var body: some View {
        ZStack{
            VStack{
                VStack{
                    Text("1")
                    Text("Apple")
                }
                .padding()
                .frame(width: 100)
                .background(Color.red)
                .cornerRadius(10)
                VStack{
                    Text("4")
                    Text("Peach")
                }
                .padding()
                .frame(width: 100)
                .background(Color.pink)
                .cornerRadius(10)
                VStack{
                    Text("2")
                    Text("Orange")
                }
                .padding()
                .frame(width: 100)
                .background(Color.orange)
                .cornerRadius(10)
            }
        }
    }
}

 

 이때 드는 의문,,, 이 코드를 줄일 수는 없을까 ? 

요로케 하면 된다 !

 

ExtractSubView struct 안에

이렇게 해당 내용을 작성하고 , 

var 변수명 : some View {
   // ~~ 내용
}

변수명을 body 안에서 호출하면 해당 View가 불러와진다.

struct ExtractSubView: View {
    
    var body: some View {
        ZStack{
            VStack{
            // body 내의 코드가 확 줄어들었음을 알 수 있다 !
                myItem
                myItem
                myItem
            }
        }
    }
    
    var myItem : some View{
        VStack{
            Text("1")
            Text("Apple")
        }
        .padding()
        .frame(width: 100)
        .background(Color.red)
        .cornerRadius(10)
    }
}

 

 근데 우리가 원하는 건 apple 3개가 아니잖아요 ??!!! 

그럼 우리는 뭘 하고 싶은 거지 ? 

 

 우리는 같은 형태의 View 에서 숫자, 과일 이름과 배경 색을 바꾸고 싶다...! 

처음에 우리가 swiftUI를 만들면 이런 코드가 뜨잖아유,,?

struct SwiftUIView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

 

1) 이 형태랑 똑같은 struc를 ExtractSubView struct 밖에  작성 ➿!

struct View이름: View {
    
    // 필요한 변수들 선언
    
    var body: some View {
        // ~~ 내용
    }
}

 

2) 우리는 과일 이름과, 과일 개수 변수, 그리고 배경 색이 필요하니까, 변수들을 struct 안에 선언해주고,

struct View이름: View {
    
    let title : String
    let count : Int
    let color : Color
    
    var body: some View {
        // ~~ 내용
    }
}

 

3) body안에 View에 보여질 요소들을 앞서 선언한 변수들과 함께 작성 ➿!

struct View이름: View {
    
    let title : String
    let count : Int
    let color : Color
    
    var body: some View {
        VStack{
            Text("\(count)")
            Text("\(title)")
        }
        .padding()
        .frame(width: 100)
        .background(color)
        .cornerRadius(10)
     }
}

 

4) 마지막으로 원래 struct(ExtractSubView)에 방금 생성한 View의 인스턴스를 만들어주면 됨!

View이름(title: "Apple", count: 1, color: Color.red)

struct ExtractSubView: View {
    
    var body: some View {
        ZStack{
            VStack{
                MyItemView(title: "Apple", count: 1, color: Color.red)
                MyItemView(title: "Peach", count: 4, color: Color.pink)
                MyItemView(title: "Orange", count: 2, color: Color.orange)
            }
        }
    }
}

struct MyItemView: View {
    
    let title : String
    let count : Int
    let color : Color
    
    var body: some View {
        VStack{
            Text("\(count)")
            Text("\(title)")
        }
        .padding()
        .frame(width: 100)
        .background(color)
        .cornerRadius(10)
    }
}

 

 

+ 마지막으로 한번 더 줄일 수 있다 !!

struct ExtractSubView: View {
    
    var body: some View {
        ZStack{
            fruits
        }
    }
    
    var fruits : some View{
        VStack{
            MyItemView(title: "Apple", count: 1, color: Color.red)
            MyItemView(title: "Peach", count: 4, color: Color.pink)
            MyItemView(title: "Orange", count: 2, color: Color.orange)
        }
    }
}

 

정리를 하면,

 변수가 없는 View는 struct 안에 이렇게 코드를 짜면 되고, 

var myItem : some View{
        VStack{
            Text("1")
            Text("Apple")
        }
        .padding()
        .frame(width: 100)
        .background(Color.red)
        .cornerRadius(10)
}

// 호출은
// myItem 이렇게 !

 

 변수가 있는 View는 struct 밖에 이렇게 코드를 짜면 된다 ! 

struct MyItemView: View {
    
    let title : String
    let count : Int
    let color : Color
    
    var body: some View {
        VStack{
            Text("\(count)")
            Text("\(title)")
        }
        .padding()
        .frame(width: 100)
        .background(color)
        .cornerRadius(10)
    }
}

// 호출은
// MyItemView(title : "Apple", count : 1, color : Color.red) 이렇게 !

 

 알면 좋은 것 ! 

변수가 있을 때 command + 클릭 -> Extract SubView 클릭 

 

 꼭 반복되는 요소만 코드를 묶어야 할까 ?  --> NOOOO!  

코드가 짱 길어지면, 작성자는 물론 코드를 읽는 사람도 해당 내용을 이해해하기 힘들다.

그래서 코드를 빼서 정리를 하는 것이 현재 함께 일하는 팀원에게, 그리고 미래의 나에게도... 좋은 일이다 !