13. [SwiftUI] ScrollView / LazyVStack & LazyHStack

파라미터

axes -> .vertical(수직 스크롤), .horizontal(수평 스크롤)

showIndicators -> 스크롤 하면 오른쪽에 회색 바 표시할지 말 지( bool )

content -> () -> View 타입 클로저 

 

스크롤뷰를 만드는 것은 간단하다.

그럼 수직, 수평 스크롤 다 되는 화면을 만들어 보자 !

//  Created by Toughie on 2023/04/13.
//

import SwiftUI

struct ScrollViewPrac: View {
    var body: some View {
        ScrollView {
            
            LazyVStack {
                
                ForEach(0..<10) { index in
                    ScrollView(.horizontal, showsIndicators: false) {
                        
                        LazyHStack {
                            
                            ForEach(0..<20) { index in
                                    RoundedRectangle(cornerRadius: 25)
                                        .fill(.white)
                                        .frame(width: 200, height: 150)
                                        .shadow(radius: 10)
                                        .padding()
                                        .overlay(Text("🥳"))
                                        .font(.largeTitle)
                            }
                        }
                    }
                }
            }
        }
    }
}

struct ScrollViewPrac_Previews: PreviewProvider {
    static var previews: some View {
        ScrollViewPrac()
    }
}

코드 구분을 위해 개행을 좀 추가해두었다.

 

1. 스크롤뷰를 만든다.

2. 스크롤뷰 안에 VStack으로 10개의 수평 스크롤뷰를 추가한다. ForEach(0..<10)

- 10개의 수평 스크롤뷰가 수직으로 쌓여 있는 (VStack) 상태

--------

스크롤뷰

스크롤뷰

스크롤뷰

,,,

--------

 

2-1. 각 수평 스크롤뷰 안에는 HStack으로 감싸진 20개의 RoundedRectangle이 있다.

--------

RoundedRectangle() RoundedRectangle() RoundedRectangle() RoundedRectangle(),,,

(이하 스크롤뷰 동일)

스크롤뷰

스크롤뷰

,,,

--------

 

3. 가로, 세로로 스크롤 가능한 가로 20, 세로 10개의 RoundedRectangle 뷰!

(아래는 이해를 위한 참고사진.

 

⭐️ -> 가로 스크롤뷰 안에 (0~19번까지 가로 사각형들이 HStack으로) (각 Row마다 20개)

별(⭐️)들이 수직으로 0~9번까지 있다는 뜻. (Columns == 10)

 

 

그럼 VStack, HSTack 앞에 붙은 Lazy는 뭔가요?

원래 VStack, HStack은 뷰가 그려질 때 바로 로드 된다.

하지만 로드해야 하는 데이터의 양이 엄청 많다면? 비효율적이다.

왜냐면 휴대폰 화면에 보이는 정보는 정말 일부분이기 때문이다.

(비슷한 맥락으로 테이블뷰와 셀에서도 이러한 문제를 해결하기 위해 reusableCell 개념이 있었다.)

따라서 뷰와 동시에 모든 데이터(스택)가 로드되지 않고,

필요한 경우에 (스크롤과 같은 동작이 있을 경우 등) 뒤늦게 로드한다.(lazy, 게으르게, 뒤늦게)는 의미로 이해하면 된다 :)

 

위와 같은 예시에서까지 사용할 필요는 없지만, 상황에 맞게 사용할 수 있으면 좋겠다.