[Flutter] Stateless Widgets

본 글은 아래의 영상을 참고하였습니다.
https://www.youtube.com/watch?v=wE7khGHVkYY&list=PLOU2XLYxmsIJyiwUPCou_OVTpRIn_8UMd&index=2

개요

본 글에서는 Flutter가 어떤 방식으로 Stateless widget을 작동시키는지 알아보고자 합니다.

먼저, widget은 Flutter 앱의 기본 단위가 되는 객체이며, 각각의 위젯들은 유저 인터페이스에 대한 불변 객체와도 같습니다.

위젯은 버튼이나 메뉴, 폰트나 색상에 대한 스타일 요소, padding과 같은 레이아웃 요소 등이 될 수 있습니다.

또한, 우리는 기존의 위젯들로부터 새로운 위젯을 만들어 낼 수도 있습니다.

위젯과 위젯을 합쳐서 새로운 위젯을 만들수도, 기존의 위젯을 변형하여 위젯을 만들수 도 있으므로 위젯들의 조합은 끝이 없다고 할 수 있습니다.

Stateless 위젯은 여러 하위 위젯(children)과 그것들을 구성하기 위한 Bulid method로 이루어진 위젯을 뜻합니다.

또한, Stateless 위젯은 어떠한 변경 가능한 상태(mutable state)도 가지고 있지 않아야 합니다.

예를 들면, 주기적으로 업데이트 되는 Text box, 다른 변수에 의해 영향을 받아 변경되는 동적인 위젯 등이 이에 해당됩니다.

위 사진은 Stateless 위젯의 아주 기본적인 예시입니다.

MyWidget이란 이름의 Stateles 위젯은 하위 요소인 Container 위젯과 Container의 child인 Text 위젯으로 이루어져 있습니다. MyWidget에서는 어떠한 요소도 실행 도중 변경되지 않습니다.

Container 위젯의 padding이나 color, Text 위젯의 “Hello”라는 텍스트 모두 변경되지 않는 상수값과 같습니다.

Flutter에서는 이처럼 중간에 상태가 변경되지 않는 위젯을 Stateless 위젯이라고 합니다.

앞에서는 Stateless 위젯이 어떻게 구성되는지 알아보았습니다.

그렇다면 Stateless widget은 어떠한 과정을 거쳐 우리에게 보여질까요?

일반적으로, Flutter의 앱은 트리형태로 구성된 위젯들의 집합이라고 알려져 있습니다.

우리는 이를 Widget Tree라고 부르죠. 이는 아주 틀린말은 아닙니다. 그러나, 위젯은 그저 앱의 UI 일부를 구성할 뿐입니다.

한마디로 설계도인 셈이죠.

그렇다면, 이는 무엇을 위한 구성일까요? 바로 Element입니다. Element는 위젯의 실존하는 객체로서 화면에 직접 보여집니다.

또한, Element Tree는 실제로 기기에 보여지는 위젯의 구조를 나타냅니다.

각각의 Widget class는 이에 대응되는 Element class를 가지고 있으며, 인스턴스(element)를 만들기 위한 method 또한 가지고 있습니다.

위의 createElement method는 Stateless 위젯에서 element를 만들기 위해 사용되는 method이며, 위젯이 Tree에 마운트 될 때 호출됩니다.

따라서, 우리가 실제로 보는 앱의 화면은 Widget이 만들어낸 인스턴스인 Element가 트리로 구성된 모습이라고 할 수 있습니다.

위의 내용을 바탕으로 Widget이 우리 눈에 보여지기까지의 과정을 한 번 살펴봅시다.

먼저, Flutter가 위젯을 Widget Tree에 추가하며 위젯에게 Element를 요청합니다. (createElement)
Element Tree에는 해당 element를 생성한 위젯의 정보와 함께 element가 추가됩니다.
그 다음으로, element는 위젯의 build method를 호출합니다.
build method가 호출되면, 해당 위젯의 children 위젯들이 1~4 과정을 연쇄적으로 반복하며
widget tree와 element tree를 구성하게 됩니다.

위 과정을 거치고 나면, Flutter 앱은 두 가지 트리를 가지게 됩니다.

하나는 위젯의 청사진과도 같은 widget tree이고, 다른 하나는 실제로 스크린에 보여지는 구조를 나타내는 element tree 입니다.

그렇다면, 앱의 가장 처음에서 Widget을 가져오기 위해서는 어떤 것이 필요한지 알아봅시다.

바로, runApp method 입니다. 가장 위의 main() 함수를 보면 runApp method를 발견할 수 있습니다.

runApp()은 앱의 시작점과도 같으며, widget을 가져와 앱의 root element로 만드는 역할을 수행합니다.

본 글에서는 Stateless 위젯의 개념과 Flutter가 어떤식으로 Stateless 위젯을 화면에 나타내는지 알아보았습니다.

또한, Stateless 위젯은 변하지 않는 요소들로 구성된 위젯이란 점도 알 수 있었습니다.

그렇다면, 동적으로 상태가 바뀌는 앱을 만들기 위해서는 어떤 방식을 사용할까요?

이는 Flutter의 Stateful Widget을 이용하면 됩니다.

다음 글에서는 Stateless 위젯과 반대되는 개념의 Stateful Widget에 대해 알아보도록 하겠습니다.