UI Toolkit인 Flutter는, Layout을 설정 할 때 선언형 UI 형태를 표방합니다.
여기서 선언형 UI란, UI를 구성하는 코드를 각각 객체화 하여, 해당 코드의 선언 / 할당을 통해 원하는 위치 / 크기로 UI를 구축 할 수 있는 형태를 말합니다.
반대적 표현으로는 명령형 UI가 있고, 전통적인 HTML / XML을 통해 UI를 그리는 형태를 예로 들 수 있습니다.
<html>
<head>
...
</head>
<body>
<div>
대표적인 명령형 UI, HTML
<ul>
<li id="li_1">이렇게 태그를 사용하면</li>
<li id="li_2">해당 li를 재활용 하고자 할 때</li>
<li id="li_3">굉장히 난감하죠?</li>
</ul>
</div>
</body>
<script>
document.getElementById('li_1').style.fontSize =
'x-large';
document.getElementById('li_2').style.fontSize =
'large';
document.getElementById('li_3').style.fontSize =
'normal';
</script>
</html>
위의 사례로도 봤을 때, 코드의 활용도 / 재사용성 등에서 많이 떨어지게 되는 형태이기 때문에, 최근들어 개발 트랜드가 선언형 UI 형태로 변모하고 있다고 할 수 있습니다.
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('선언형 UI 예시'),
),
body: Center(
child: Text('이것이 선언형 UI다.'),
),
)
);
단순히 사전에 정의 된 객체를 일종의 트리 형태로 쌓아가면서 UI를 구축 하기 때문에, 코드를 재사용하거나 새로 정의하는 Widget(Component)를 활용하여 생산성을 크게 높일 수 있는 것이 특징입니다.
대표적인 사례로는 Flutter / Swift UI / Jetpack Compose / React 등이 있습니다.
그럼 아래부터는 Flutter 내에 UI를 구성할 때, 대표적으로 사용되는 Widget들에 대해 이야기 해 볼까요?