🎨 iOS 뷰의 드로잉 사이클 (View Drawing Cycle)

코드베이스로 UI를 그리다가 cornerRadius가 적용 되지 않았던 경험이 있지 않으신가요?

이는 View의 Drawing Cycle과 연관이 있는데요, UI를 제대로 핸들링하기 위해서 View Drawing Cycle에 대해 알아보았습니다.

🔁 Drawing Cycle이란

뷰가 로드 되거나 변경이 있을때 화면에 시각적으로 표현되어 그려지는 사이클

뷰는 Constraints(제약조건)을 이용해서 Layout(Size, Position)을 결정하고 그 Layout을 토대로 UI를 그립니다.

UIKit에서는 이 과정을 Drawing Cycle이라고 부릅니다.

🔁 Drawing Cycle의 메서드 실행 순서

updateConstraints() → layoutSubviews() → draw(_:)

이 메서드들의 공통점은 시스템 사이클에 맞게 호출이 되어야 하므로 직접 호출해서는 안됩니다. 직접 호출하게 되면 정상적인 타이밍에 호출되는게 아니므로 버그가 발생할 수 있습니다.

그래서 오버라이드 및 super 호출을 하거나, 예약 메서드로 시스템이 적절한 시점에 호출하도록 해야 합니다.

1. updateConstraints()

뷰의 Constraints를 업데이트 해줍니다.
현재 기기의 화면 크기와 부모 뷰의 크기를 기준으로 갱신됩니다.

override func updateConstraints() {
    // 커스텀 제약 조건 업데이트
    super.updateConstraints()
}

• 반드시 마지막에 super.updateConstraints()를 호출해야 합니다.
• 직접 호출하면 안되고 오버라이드하거나 예약해주는 메서드 setNeedsUpdateConstraints() / updateConstraintsIfNedded() 를 사용해야합니다.

2. layoutSubviews()

하위 뷰의 레이아웃(위치, 크기)를 재조정합니다.
뷰 들의 레이아웃 프레임이 정해지는 시기입니다.

override func layoutSubviews() {
    super.layoutSubviews()
    // 레이아웃 업데이트
}

• 이때 프레임 관련 작업(frame.height/2 만큼의 corenrRadius 적용 등)이 가능해집니다.
• 호출하면 해당 뷰의 모든 서브뷰들이 layoutSubviews()를 연달아 호출합니다.
• 소모 비용이 너무 크기 때문에 직접 호출은 하지 않습니다.
• layoutSubviews가 호출되도록 예약하는 메서드 setNeedsLayout() / layoutIfNeeded()를 사용해야 하고, 추가적인 업데이트가 필요하다면 오버라이드해서 사용해야 합니다.

3. draw(_ :)

뷰의 실제 콘텐츠(그래픽 요소)를 그립니다.

override func draw(_ rect: CGRect) {
    super.draw(rect)
    // 커스텀 그리기 코드
}

• UIView의 기본적인 요소(색상, 코너 반경 등)는 draw(_:)가 필요 없습니다.
• draw 역시 직접 호출하지 않고 setNeedsDisplay() 로 예약하거나 오버라이드 해야합니다.

📝 예약하는 메서드들

setNeedsUpdateConstraints, updateConstraintsIfNeeded

• updateConstraints를 호출할 수 있도록 예약해주는 메서드입니다.

setNeedsLayout, layoutIfNeeded

• layoutSubviews를 호출할 수 있도록 예약해주는 메서드입니다.

setNeedsDisplay

• draw를 호출할 수 있도록 예약해주는 메서드입니다.
• View의 실제 컨텐츠가 변경될 때,View를 다시 그려야함을 시스템에 알릴 수 있습니다.

위 메서드들은 이름이 비슷한 것처럼 동작 역시 비슷하게 동작합니다. 그래서 setNeedsLayout, layoutIfNeeded를 기준으로 설명 드리겠습니다.

setNeedsLayout

setNeedsUpdateConstraints, setNeedsDisplay도 비슷하게 동작합니다.

• 뷰 업데이트가 필요하다고 trigger 하는 역할입니다.
• 레이아웃을 업데이트하지 않고, 다음 업데이트 주기 때 layoutSubviews를 비동기적으로 호출하여 업데이트 합니다.
• 당장 레이아웃을 바꿀 필요가 없을 때 사용하면 되고, 불필요한 레이아웃 연산을 막아 성능 향상에 도움이 됩니다.

func updateCircle(center: CGPoint, radius: CGFloat) {
    self.center = center
    self.radius = radius
    
    setNeedsLayout() // 레이아웃 업데이트 예약
    setNeedsDisplay() // 다시 그리기 예약
}

layoutIfNeeded

updateConstraintsIfNeeded 도 비슷하게 동작합니다.

• 레이아웃을 즉시 업데이트 해주며 동기적으로 동작합니다.
• 업데이트를 바로 적용하고 싶을 때(ex. 애니메이션) 사용하면 됩니다.
• 보류 중인 레이아웃 업데이트가 없는 경우 콜백을 호출하지 않고 종료되기 때문에 성능 향상에 도움이 됩니다.

UIView.animate(withDuration: 0.3) {
    myView.frame.size = CGSize(width: 200, height: 200)
    myView.layoutIfNeeded()
}

➡️ 각 View들간의 연쇄적 호출 순서

뷰가 여러개 겹쳐 있을 때, updateConstraints와 layoutSubviews의 호출 순서 차이가 있습니다.

오토레이아웃은 하위 뷰 ➡️ 상위 뷰 순서로, 그 후에  뷰들의 배치를 상위 뷰 ➡️ 하위 뷰 순서로 하게 됩니다. 안쪽 부터 제약조건을 잡아가고, 다시 바깥쪽부터 위치와 사이즈를 잡아가는 것이죠.

• updateConstraints - 하위 ➡️ 상위
• layoutSubviews - 상위 ➡️ 하위

그래서 전체적인 호출 순서가 이런식으로 일어나게 됩니다.

• 하위 (updateConstraints) ➡️ 중간 (updateConstraints) ➡️ 상위 (updateConstraints) ➡️ 상위 (layoutSubviews) ➡️ 중간 (layoutSubviews) ➡️ 하위 (layoutSubviews)

Drawing Cycle에 대해 간단하게 정리해보았는데요, 이 내용은 iOS의 Main Run Roop와 밀접하게 관련되어있어 다음에 이와 관련된 내용을 정리해보겠습니다. 감사합니다 ☺️