ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 명령형 UI vs 선언형 UI
    개발/기술 2021. 11. 26. 20:00

    애플리케이션마다 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

    '개발 > 기술' 카테고리의 다른 글

    AOT(Ahead Of Time) Compiler  (0) 2021.11.26
    JIT(Just In Time) Compilation  (0) 2021.11.26
    Kafka - Event Streaming Platform  (0) 2021.10.13
    JAVA 파일 생성/읽기/쓰기  (0) 2018.11.25
    스택, 힙, 코드, 데이터영역  (6) 2018.11.10

    댓글

Designed by Tistory.