[iOS] iOS는 화면을 어떻게 그릴까? RunLoop 부터 Constraint, Layout, Display 까지

런루프부터 화면에 뷰가 그려지기까지.

스터디를 하면서 기술발표가 있었는데요, 준비한 내용을 정리해두겠습니다! 거의 피피티에 모든걸 다 담아서 글은 많이 없을 것 같아요ㅎㅎ

RunLoop(런루프)

iOS에서 발생하는 모든 이벤트는 RunLoop를 거쳐 처리되기 때문에 RunLoop에 대한 이해가 먼저 필요합니다!

간략하게 설명하면, RunLoop는 모든 스레드에 하나씩 존재하면서 시스템에 들어오는 두 종류의 이벤트, Input Source와 Timer Source를 처리하는 이벤트 처리 루프입니다.

 

UIApplication이 실행시켜주는 메인 스레드를 제외하고는 런루프는 자동으로 실행되지 않아요!

 

 

런루프는 이런 과정을 거쳐서 실행되는데요, 시스템에 들어오는 이벤트들은 곧바로 런루프로 전달되는 것이 아니라 Event Queue라는 대기열에 쌓이고, 런루프는 실행이 될 때 여기에 있는 이벤트들을 가져와 처리하게 됩니다. 

 

런루프가 가져온 이벤트들은 애플리케이션 객체에 전달되고, 이 객체는 각 이벤트들을 처리하는 서비스 루틴을 찾아 실행시키죠. 이 서비스 루틴에는 우리가 작성한 코드도 포함될 수 있습니다. 

 

서비스 루틴이 종료되면 함수들이 모두 반환되겠죠? 런루프는 자신의 사이클에 실행시켰던 함수들이 모두 반환되면 Update Cycle이라는 특별한 루틴을 실행합니다.

 

Update Cycle

업데이트 사이클은 Layout, Display, Constraint를 갱신하는 작업의 사이클인데요, 저 세 친구들을 아래에서 바로 설명하도록 하겠습니다. 지금은 대략적으로 화면을 업데이트한다! 라고 생각해보면 될 것 같아요.

 

그리고 업데이트 사이클은 항상 실행되는 것이 아니라 런루프의 마지막 지점에서 실행됩니다. 그래서 사용자가 이벤트를 만들어도 곧바로 화면이 업데이트되지는 않습니다.

 

업데이트 사이클은 대략 1초에 60번 정도의 사이클을 돌게됩니다. 그래서 사용자가 발생시킨 이벤트에 대해 곧바로 반응하지 않아도 사용자는 내부적으로 어떤일이 일어났는지 알 수 없죠.

 

하지만 어떤 경우에는 즉각적인 업데이트가 필요할 때가 있겠죠? 그래서 UIView는 개발자들이 업데이트 사이클을 제어할 수 있는 메소드들을 제공하게됩니다.

 

Layout

그럼 레이아웃이 뭘까요? 단순합니다. 레이아웃은 어떤 뷰의 크기(가로, 세로)와 위치(x, y)를 의미해요! 즉, 프레임 그 자체입니다.

모든 뷰는 프레임을 가지고 있죠. 그래서 UIView에는 이 레이아웃을 업데이트하는 사이클을 제어하는 몇가지 메소드를 제공합니다.

 

LayoutSubviews

layoutSubviews는 이 메소드를 호출한 뷰와 그 하위에 있는 모든 subview의 위치와 크기를 변경하도록 합니다. 

이 메소드가 불렸을 때 변경사항이 없는 뷰들도 다 다시 그리면 오버헤드가 너무 크겠죠? 그래서 시스템은 변경 사항이 있을 때마다 해당 뷰에 업데이트가 필요하다는 마킹을 붙여둡니다.

 

그리고 업데이트 사이클이 시작되어서 layoutSubviews가 호출되면 마킹된 뷰와 서브뷰들을 찾아가 레이아웃을 업데이트 해주게됩니다.

그런데 애플은 이 메소드가 비용이 굉장히 큰 연산이기 때문에 절대로 오버라이딩 하는 것 외에는 외부에서 호출하지 말라고 하고있어요.

 

대신 두 가지 다른 메소드를 제공해줍니다.

 

마킹의 조건

레이아웃이 변경되는 조건은 위에 적힌 것과 같아요. 

 

setNeedsLayout

비용이 큰 layoutSubviews 대신 사용할 수 있는 메서드가 setNeedsLayout입니다. setNeedsLayout은 다음 돌아오는 사이클에 뷰를 업데이트 하라고 마킹해두고 종료됩니다. 

 

이렇게 마킹된 뷰는 다음 업데이트 사이클에서 layoutSubviews에 의해 업데이트됩니다.

 

layoutIfNeeded

하지만 위 방법은 여전히 다음 사이클까지 기다려야하는 문제가 있어요. 그래서 즉각적으로 뷰를 업데이트할 수 있도록 layoutIfNeeded 라는 메소드를 제공합니다.

 

layoutIfNeeded는 실행이되면 곧바로 layoutSubview를 실행하고 업데이트가 마치면 종료되는, 동기적으로 동작하는 함수입니다. 하지만 이번에도 업데이트 사이클을 강제로 시작하니 비용이 비싸겠죠.

 

그래서 애플은 꼭 필요한 경우가 아니라면 setNeedsLayout을 사용하는 것을 권장합니다.

 

 

layoutIfNeeded가 반드시 필요한 경우는 애니메이션을 사용하는 경우인데요, 위 같은 경우에서 constraint를 바꿔준 후에 변경된 레이아웃을 적용하지 않고 애니메이션을 실행하면 애니메이션이 동작하지 않게 됩니다. 아직 사이클이 시작되지 않았거든요.

 

왼쪽: layoutIfNeeded 미사용 / 오른쪽 layoutIfNeeded 사용

그래서 애니메이션이 시작되기 직전에 모든 레이아웃을 다 적용시켜두고 애니메이션과 함께 업데이트 사이클을 돌릴 수 있습니다.

 

Display

Display는 사이즈나 위치와 상관없이 화면에 그려지는 요소들을 의미합니다. 

 

Draw

그리고 draw는 이런 요소들을 그리는 메소드입니다. 이번에도 애플은 직접 호출하는 것을 지양하라고 말하는데요, 대신 사용할 수 있는 메소드들을 알아봅시다!

 

setNeedsDisplay

이름처럼 setNeedsLayout과 동일한 동작에서 대상이 Display인 것만 다릅니다.

DisplayIfNeeded는 없어요ㅋㅋ 만약 즉각적인 업데이트가 필요하다면 didSet같은 프로퍼티 옵저버로 setNeedsDisplay를 호출하고 draw 메서드를 오버라이딩 하라고 https://tech.gc.com/demystifying-ios-layout/ 이 글의 저자분은 권하고 있어요.

 

Constraints

Constraints는 오토레이아웃을 사용하는 뷰들의 제약조건을 의미합니다.

 

UpdateConstraints

UpdateConstraints 메소드는 뷰의 Constraint를 업데이트할 때 불리는 메소드입니다. 이번에도 역시 업데이트 사이클에서 불리겠죠?

 

뷰의 Constraint가 변경되면 마킹이 되고, 업데이트 사이클에서 마킹된 뷰들의 Constraint를 업데이트하게 됩니다.

 

setNeedsUpdateConstraints

레이아웃과 디스플레이에 사용되는 메소드들처럼 다음 사이클에 업데이트할 뷰를 마킹하는 메소드입니다.

 

updateConstraintsIfNeeded()

Constraints는 즉시 업데이트하는 메소드가 제공됩니다! updateConstarintsIfNeeded()를 호출하면 updateConstraint가 곧바로 실행됩니다.

 

이때 만약 setNeedsUpdateConstraints가 예약했던 사이클 이전에 실행되었다면, 마킹을 지우고 다음 사이클에서 두 번 업데이트되지 않도록합니다.

 

invalidateIntrinsicContentSize

Constraint에는 특명한 메소드가 하나 추가되어 있는데요, intrinsicSize의 변경을 업데이트 사이클에 예약할 수 있는 메소드입니다. 

 

커스텀 뷰에 intrinsicContentSize를 적용하거나, 오버라이딩되어 변경된 intrinsicContentSize를 적용하고 싶다면 이 메소드를 호출해 업데이트 사이클에 변경을 등록할 수 있습니다.

 

정리!

아래 표는 https://tech.gc.com/demystifying-ios-layout 이 글 마지막에 나와있는 표를 간단하게 정리한건데요, 실제로 요소들을 업데이트할 때 호출하는 메소드와, 마킹하는 시점에 대한 메소드를 정리해두었습니다.

 

마지막으로 아래 그림은 뷰와 뷰컨트롤러가 그려지는 사이클을 그려본 것입니다! https://medium.com/@Alpaca_iOSStudy/viewcontroller-view-lifecycle-daed5766e02b  이 글에서 엄청나게 분석을 꼼꼼히 해주셔서 이번에 공부하면서 나왔던 주요한 메소드들을 순서대로 나열해보았습니다! 실제로 화면이 그려질 때 Constraint, Layout, Display 순으로 그려진다는 것을 알 수 있네요..!

오늘의 글은 대부분 Demystifyinh iOS layout 글을 제가 이해한대로 다시 정리하면서 작성했어요. 원문이 정말 잘 쓰여져 있으니 읽어보시는걸 추천드립니다!

Reference

• https://tech.gc.com/demystifying-ios-layout
• https://medium.com/@Alpaca_iOSStudy/viewcontroller-view-lifecycle-daed5766e02b