[SwiftUI] Invalid frame dimension (negative or non-finite) 오류

[머릿말]

뷰에서 사각형을 화면에 꽉 차게 만들고자 .frame(width: .infinity) 수정자를 사용했다. 코드를 작성할 땐 보이지 않던 Warning이 시뮬레이터를 실행하니 나타났다. 색깔도 노란색이 아닌 보라색으로 말이다.

---

1. Invalid frame dimension (negative or non-finite) 오류란?

"유효하지 않은 크기 (음수 또는 비정형)" 

이 오류는 뷰의 크기가 유효하지 않을 때(음수이거나 비정형인 경우) 발생한다. frame에 음수 값을 넣는 경우는 거의 없기에 아마 대부분은 .infinity 값을 사용하고 이 오류를 접하게 되었을 것이다.

.infinity 값을 사용함에 따라 Invalid frame dimension 오류 발생

 

2. 오류 발생 원인

위와 같은 코드를 작성할 때의 생각은 다음과 같았을 것이다.

"이 뷰의 크기는 부모 뷰의 남은 공간 전체가 되도록 하자"

 

이 생각대로 구현하기 위해서는 위 코드와는 다른 형태로 작성해야 한다. 이를 이해하기 위해서는 먼저 SwiftUI의 Layout 배치 방법에 대한 이해가 필요하다. 이는 아래 포스팅에 정말 친절하고 자세하게 설명되어 있다🥹

[SwiftUI] SwiftUI 의 layout 3 단계

 

위 글에서 말하고 있는 SwiftUI의 layout 배치 3단계는 다음과 같다.

1. Parent proposes a size for child - 부모 뷰가 자식 뷰에게 사이즈(자식 뷰가 가질 수 있는 사이즈)를 제안한다.
2. Child chooses its own size - 자식 뷰가 스스로의 필요한 사이즈를 선택한다.
3. Parent places child in parent's coordinate space - 부모 뷰는 부모 뷰의 좌표 공간에 자식 뷰를 배치한다.

위 내용에서 알 수 있듯, 자식 뷰는 부모 뷰가 제안한 크기 중 자신에게 필요한 크기만을 선택하여 다시 부모 뷰에게 알려줘야 한다.

ex) HStack에서 뷰를 배치하는 경우

HStack의 width가 500이라고 가정하고, 자식 뷰가 300만큼의 공간을 사용한다고 가정하자.
부모 뷰인 HStack은 300의 자식 뷰를 가운데에 배치하고 양옆으로 100의 공간을 배치할 것이다.

 

그런데 만약 자식 뷰가 필요한 크기로 .infinity를 선택한다면? => 부모 뷰는 자식 뷰의 크기를 가늠할 수 없다!

 

 

3. 해결 방법

원인을 알았으면 해결 방법은 자연스레 알 수 있다. 부모 뷰에게 한정된(finite) 크기를 알려줘야 한다는 것이다. 처음에 사용했던 코드를 기준으로 문제를 해결해보자.

 

3-1. width가 아닌 maxWidth 사용

maxWidth는 해당 뷰가 가질 수 있는 최대 너비를 뜻하고, 이는 한정된 값을 갖는다.

 

3-2. 특정 수치 입력

 

 

---

사람의 입장에서 생각했을 때 "남은 공간 전체를 줘!"라는 뜻으로 얼마든지 infinity를 사용해도 될 것 같지만

이를 위해선 width가 아닌 maxWidth를 사용해야 한다는 것!!

즉, "남은 공간에서 최대 infinity한 공간을 줘!"라고 볼 수 있는 것이다😃

 

끝!