명령형 UI

명령형 프로그래밍 방식이란 “UI 객체에 대한 갱신을 명령”하는 것이다. 이 때 명령은 함수의 호출을 통한 명령을 의미한다. 개발자는 UI 객체와 변수를 정확히 연결하고 관리해야 한다.

기존의 UI를 만드는 방식으로 기존 안드로이드는 트리형태로 뷰를 구성한다.
레이아웃을 맨 아래에 깔고 그 위에 브랜치처럼 텍스트뷰, 이미지뷰를 넣고 다시 레이아웃을 넣는 등 쌓아가는 개념으로 뷰를 그렸다.

예를 들어 아래와 같이 TextView 데이터가 있다고 가정해보자.

<TextView
	android:id="+@id/tvTextView"
	android:text="helloWorld"
	...
/>


이러한 TextView는 Android에서 제공하는 API객체이다. 아래와 같은 TextView 클래스가 만들어진다.
(text를 가진 TextView 객체가 메모리에 존재하고 있다.)

@RemoteView
public class TextView extends View implements ViewTreeObserver.OnPreDrawListener { ... }


우리가 xml에서 android:text="helloWorld"과 같이 선언해주면 TextView 클래스의 setText() 메서드를 호출하는 것과 동일하다.

@android.view.RemotableViewMethod
    public final void setText(CharSequence text) {
        setText(text, mBufferType);
    }

그러고 이러한 메서드는 xml뿐만 아니라 Activity내의 소스코드에서도 접근이 가능하다.
(findViewById뿐만 아니라 viewBinding, dataBinding을 통하여 노드에 접근할 수 있다.)

val textView = findViewById<TextView>(R.id.tvTitle)
textView.text = "HelloWorld"

명령형 UI는 UI객체에게 갱신을 명령하는 프로그래밍 방식이다.
UI객체에게 갱신을 명령해서 UI 랜더링을 시도한다.

선언형 UI

선언형 UI는 구성가능한 함수를 호출하는 형태로 UI를 구성한다.

선언형 UI에서 중요한 부분은 State 즉 상태라는 개념이다.
뷰마다 State가 있고, 이 값을 변경하게 되면 새로운 화면을 생성해서 다시 화면을 렌더링하게 된다. 따라서 개발자는 State 변화에만 집중하면 된다.

@Composable
fun loadTextView() {
	Text("HelloWorld")
}

Text("HelloWorld")를 통해서 HelloWorld라는 text를 가진 컴포넌를 UI에 띄운다.
명령형UI에서 설명했던 TextView 처럼 Text()도 객체라고 생각할 수 있다.

@Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
) { ... }

정답을 얘기하지면 Text()는 객체가 아니다. Text()는 구글API로 제공되는 Composable 함수이다.

객체의 상태를 xml에 바인딩하는 방식이 아닌, 구글 API로 제공되는 Composable메서드인 Text()를 호출하는 방식으로 UI를 렌더링한다.
그리고 UI는 State를 참조하고 있고 이벤트에 의해 State가 변경되면 UI가 렌더링된다.

선언형 UI는 Composable한 함수를 호출함으로써 UI렌더링을 시도한다.
선언형 UI 방식은 명령형UI방식에 비해 라인 수를 미친듯이 줄일 수 있다.

선언형 UI는 명령형 UI와 달리 변화가 생긴 UI 객체를 다시 생성한다.
이로써 얻는 장점은 개발자가 변수와 UI 객체 간의 연결고리에 대하여 고민할 필요가 없다는 점이다.

Reference

예시로 확인 가능한 명령형 UI와 선언형UI
명령형UI, 선언형 UI

참고