SwiftUI에서 많이 하는 실수 - GeometryReader를 오용해 레이아웃이 엉망이 되는 실수

SwiftUI에서 많이 하는 실수 - GeometryReader를 오용해 레이아웃이 엉망이 되는 실수

 

GeometryReader는 부모 공간의 크기를 참조하여 레이아웃을 계산할 수 있는 강력한 도구입니다.
하지만 무분별하게 사용하면 View가 화면 전체를 차지하거나, 의도치 않은 위치에 배치되면서
레이아웃이 쉽게 망가집니다.

---

1. 문제 원인

• Auto Layout / frame 기반 사고를 그대로 SwiftUI에 가져옴
• “일단 GeometryReader로 감싸고 frame 계산하면 되겠지”라는 식의 사용
• GeometryReader가 기본적으로 가능한 한 최대 공간을 차지한다는 점을 모름

---

2. 나타나는 증상

• 특정 컴포넌트만 커지길 원했는데 화면 전체를 덮어버림
• 스크롤뷰 안에서 레이아웃이 이상하게 늘어나거나 스크롤이 안 됨
• 디바이스 회전/사이즈 변경 시 예측 불가능한 위치로 이동

---

3. 잘못된 코드 예시

struct BadLayoutView: View {
    var body: some View {
        GeometryReader { geo in
            // ❌ 전체 화면을 차지
            Text("Hello")
                .position(x: geo.size.width / 2,
                          y: geo.size.height / 2)
        }
        .background(Color.yellow)
    }
}

• 이 View는 부모가 허용하는 모든 공간을 차지합니다.
• 다른 View와 함께 배치했을 때 레이아웃이 깨지게 됩니다.

---

4. 올바른 코드 예시

4-1. 꼭 필요한 영역에만 한정

struct CenteredTextView: View {
    var body: some View {
        VStack {
            Text("위 영역")

            GeometryReader { geo in
                Text("가운데 텍스트")
                    .frame(width: geo.size.width, height: geo.size.height)
                    .background(Color.blue.opacity(0.2))
            }
            .frame(height: 200)    // ✅ GeometryReader 높이를 한정

            Text("아래 영역")
        }
    }
}

4-2. alignmentGuide / frame 조합으로 대체 가능 여부 먼저 확인

struct WithoutGeometryReader: View {
    var body: some View {
        ZStack(alignment: .center) {
            Color.yellow
            Text("중앙 정렬 텍스트")
        }
    }
}

• 단순 중앙 정렬, 비율 기반 배치 등은 frame/alignment로 충분한 경우가 많습니다.

---

5. 정리 및 팁

• GeometryReader는 “진짜로 부모 크기 값이 필요할 때만” 사용하는 마지막 수단에 가깝습니다.
• 레이아웃이 이상하게 커지거나, 화면 전체를 차지한다면 GeometryReader 남용을 의심해보세요.
• 대체 가능하다면 frame, alignment, Spacer, Layout 프로토콜 등을 먼저 고려하는 편이 좋습니다.