Compose 선행 개념 (#Compose란, #선언형UI, #명령형 UI)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Compose 란?

• Jetpack Compose는 Android를 위한 현대적인 선언형 UI 도구 키트
• Compose는 프런트엔드 뷰를 명령형으로 변형하지 않고도 앱 UI를 렌더링할 수 있게 하는 선언형 API를 제공하여 앱 UI를 더 쉽게 작성하고 유지관리할 수 있도록 지원한다.

 

 

 

자꾸 '선언형'이 언급되는데 이에 대해 알아보자!!

👇

 

---

선언형 전에는 명령형 UI를 사용했었다,,

 

기존  '명령형? 프로그래밍 패러다임' 

(= Imperative programming paradigm)

• 뷰 계층 구조는 UI 위젯의 트리 형태
• 사용자 상호작용 등의 이유로 인해 앱의 상태가 변경되면, 현재 데이터를 표시하기 위해 UI 계층 구조를 업데이트해야 하는데
  보통 아래처럼 뷰를 찾아 접근하여 위젯 내부 상태를 업데이트 시킨다 ;ㅁ;
  [일반적인 방법]
      a) findViewById()와 같은 함수를 사용하여 트리를 탐색
      b) button.setText(String), container.addChild(View) 이나
           img.setImageBitmap(Bitmap)과 같은 메서드를 호출하여 위젯 상태를 변경
  
  
• 👆 이렇게 뷰를 수동으로 조작하면 오류가 발생할 가능성이 커진다. 예를 들어 데이터를 여러 위치에서 렌더링한다면??
  데이터를 표시하는 뷰 중 하나를 업데이트 하는 것을 잊기 쉽다. 또한 두 업데이트가 예기치 않은 방식으로 충돌할 경우 잘못된 상태를 야기하기도 쉽다.

 

---

 

 

그래서 지난 몇 년에 걸쳐 업계 전반에서 `선언형 UI 모델`로 전환하기 시작했다고 한다.

 

이 기법은 처음부터 화면 전체를 개념적으로 재생성한 후 필요한 변경사항만 적용하는 방식으로 작동한다.

 

 

 

그래서
"Compose는 선언형 UI 프레임워크"

👇

 

---

'선언형 프로그래밍 패러다임' 
(= Declarative programming paradigm)

• (앞에서 말했듯이)  처음부터 화면 전체를 개념적으로 재생성한 후 필요한 변경사항만 적용하는 방식으로 작동함
• Stateful 뷰 계층 구조를 수동으로 업데이트할 떄의 복잡성을 방지할 수 있다.
• Compose는 선언형 UI 프레임워크이며, 특정 시점에 UI의 어떤 부분을 다시 그려야 하는지를 지능적으로 선택한다. (Recomposition)

 

---

명령형UI (Imperative UI) vs 선언형UI (Declarative UI)

	명령형UI (Imperative UI)	선언형UI (Declarative UI)
개념	어떤 작업을 수행할때 말 그대로 ('함수의 호출'을 통해서) 명령을 내리는걸 의미	사용자 인터페이스의 상태와 레이아웃을 설명하는 구조화된 데이터나 코드를 사용하여 UI를 정의
UI 렌더링 방식	UI를 렌더링할 때, '객체의 상태'를 xml에 바인딩하는 방식	Composable 메서드를 호출하는 방식으로 UI를 렌더링
UI 업데이트 방식	위젯( = 특정 위젯의 객체와 대응)의 setter메서드를 사용함 ex) `TextView.setText("hello")`를 호출	선언형UI에서는 구성 가능한 함수(=Composable함수)를 '단순히 호출'하는 형태로 UI를 구성 ex) `@Composable TextView()`를 호출
기타	UI를 어떻게 보여지기 위해(=What, 목표) UI를 어떻게 구현(How, 목표달성 방법)하는지에 대한 구체적인 명령을 프로그래밍적으로 지정하는 방식에 중점	UI를 어떻게 구현하는지에 대한 구체적인 명령이 아니라, UI가 어떻게 보여져야 하는지를 선언(=What, 설명)하는 방식에 중점

 

=> 둘은 상반되는 개념은 아니다. "선언형(Declarative)은 추상화된 명령형(Imperative)"로 볼 수 있다.

 

 

 

 

---

출처

---

https://developer.android.com/develop/ui/compose/mental-model

Compose 이해  |  Jetpack Compose  |  Android Developers

 

https://velog.io/@squart300kg/%EB%AA%85%EB%A0%B9%ED%98%95-UI%EC%99%80-%EC%84%A0%EC%96%B8%ED%98%95-UI%EC%9D%98-%EC%B0%A8%EC%9D%B4

명령형 UI와 선언형 UI의 차이