명령형 UI vs 선언형 UI

애플리케이션마다 UI Framework가 각각 다른데, 크게 명령형 UI(Imperative UI) 와 선언형 UI(Declarative UI) 로 나눌 수 있다. 

 

명령형 UI 

 

Win32 부터 안드로이드, iOS 까지 기존 개발자들에게 가장 친숙한 형태로 메뉴얼하게 화면에 UI View를 추가하거나 삭제할 수 있는 형태의 프레임워크를 말한다. 위 예시 왼쪽 그림에서 View c1, c2를 갖고 있는 ViewB를 오른쪽 그림처럼 배경 화면이 빨간색이고 c3를 갖고 있는 화면으로 변경한다면 명령형 UI 에선 아래 같은 코드로 구현 하게 된다.

 

// Imperative style
b.setColor(red)
b.clearChildren()
ViewC c3 = new ViewC(...)
b.add(c3)

 

선언형 UI 

 

선언형 UI는 새로 나운 개념이다. 코드 상에 추가한 화면 View는 더이상 추가하거나 삭제 할 수 없고 화면을 변경하기 위해선 새롭게 만들어야 한다. 여기서 State 라는 개념이 도입되는데 선언형 UI에선 뷰마다 State가 있고 이 State값이 변경하게 되면 새로운 화면을 생성해서 다시 화면을 업데이트 하게 된다. 위 예시의 왼쪽 그림을 오른쪽 그림처럼 바꾼다면 선언형 UI에서 아래 코드 처럼 c1, c2를 제거하는 것이 아니라 새로운 화면을 생성하게 된다. ViewB가 c3 만 자식으로 갖고 배경 화면이 빨간색인 새로운 상태를 갖게 되는 것이다.

 

// Declarative style
return ViewB(
  color: red,
  child: ViewC(...),
)

 

새로운 화면을 생성하면서 발생할 수 있는 오버헤드는 프레임워크에서 담당한다. 이미 프레임워크단에서 최적화를 많이 해뒀기 때문에 성능에는 큰 이슈가 없다고 봐도 좋을 것 같다.

 

선언형 UI Trend

 

선언형 UI에선 UI 의 변경 사항은 프레임워크에서 담당하도록했기 때문에 개발자는 화면이 변경할 때 발생할 수 있는 오버헤드는 신경쓸 필요가 없고 State 변화에만 집중 할 수 있어 개발하기 편리해진다. 지금까지 명령형 UI를 사용한 개발자 입장에선 State라는 새로운 개념이 익숙하진 않을 수 있지만 사용하다보면 확실히 잔업무가 줄어드는 것을 느낄 수 있다. 선언형 UI는 리액트를 사용하는 웹에서 주로 사용되다가 현재는 플러터, Swift UI, Android Jetcompose과 같은 새로운 UI 프레임워크가 등장하면서 모바일에서도 적용되는 추세다. 앞으로도 다양한 프레임워크에서 선언형 UI를 채택하게 될 것 같다.

 

 

참고자료

https://docs.flutter.dev/get-started/flutter-for/declarative