플러터 위젯

플러터(Flutter) - 위젯(Widget)

위젯(Widget)이란?
유저 인터페이스를 구성하는 단위이다.
레고를 조합하는 것처럼 무언가를 만들어내기 위해 위젯을 섞고 맞춘다.
플러터의 선언성(declarative nature)은 UI를 만들기 쉽게 한다. 위젯은 앱의 상태(state)를 보여주는 청사진이다.

 

위젯은 UI를 만드는 함수와 같다. state를 입력 받은 위젯의 build 메소드는 위젯의 UI를 만들어낸다.

 

 

위와 같은 UI를 보자. 이 Card 위젯은 다음과 같은 위젯들로 구성되어 있다.

 

컨테이너(Container) 위젯 : 위젯의 스타일과 꾸미기, 포지션 등을 담당한다.
칼럼(Column) 위젯 : 다른 위젯들을 세로로 보여준다.
AuthorCard 커스텀 위젯 : AuthorCard라는 위젯을 직접 정의해서 만든, author 정보를 보여주는 위젯
확장(Expanded) 위젯 : 남은 공간을 채우도록 하는 위젯.
스택(Stack) 위젯 : 위젯들을 다른 위젯 위에 덮는 위젯.
포지션(Positioned) 위젯 : 스택에서 위젯의 위치를 제어하는 위젯.

 

위젯 트리 (Widget Tree)

 

모든 위젯은 build() 메소드를 가진다. 이 메소드를 통해 위젯 안에 다른 위젯들을 감싼 UI 구성을 만들 수 있다. 이는 트리 형태의 데이터 구조를 형성한다. 각 위젯은 자식 위젯(children)이라 불리는 다른 위젯들을 포함할 수 있다.

 

위 그림의 AuthorCard와 Expanded 또한 여러 위젯으로 쪼갤 수 있다.

 

위젯 트리는 UI의 레이아웃(배치)를 어떻게 구성할 것인지를 묘사하는 청사진을 제공한다.
플러터는 트리의 노드들을 방문하고 각각의 build() 메소드를 호출하여 전체 UI를 구성한다.

 

플러터의 아키텍쳐와 위젯 렌더링 (Rendering Widgets)

 

플러터의 아키텍쳐는 다음과 같은 3개의 레이어로 구성되어 있다.

 

그 중에서 프레임워크 레이어는 다음과 같이 4개의 파트로 쪼갤 수 있다.

 

Material과 Cupertino는 UI 컨트롤 라이브러리로써, 위젯 레이어의 맨 위에 탑재된다.
이는 UI를 각각 안드로이드 혹은 IOS 앱처럼 보이게 만들어준다.

위젯 레이어는 위젯의 구성을 추상화한 것이다. 이는 UI 컨트롤을 만드는데 필요한 모든 primitive class들을 담고 있다.
이에 대한 공식 문서는 다음과 같다.

http://api.flutter.dev/flutter/widgets/widgets-library.html

 

렌더링 레이어(Rendering Layer)는 위젯의 레이아웃을 추상화한 것으로, 레이아웃을 그리고 다룬다. 이는 모든 위젯의 좌표와 프레임을 수작업으로 다시 컴퓨팅해줘야 하지 않아도 되게 해준다.

파운데이션(Foundation)은 dart:ui layer라고도 알려져 있는데, 애니메이션과 페인팅, 제스쳐 등을 다루는 핵심 라이브러리를 포함하고 있다.

 

플러터 트리 (Flutter Trees)

 

플러터 프레임워크는 다음 3개의 트리들을 병렬적으로 관리한다.

위젯 트리(Widget Tree)
엘리먼트 트리(Element Tree)
렌더 오브젝트 트리(RenderObject Tree)

 

위젯 : public API를 가지고 있고 프레임워크의 청사진이다. 개발자는 주로 위젯의 구성을 다룬다.
엘리먼트 : 위젯과 위젯의 렌더 오브젝트를 관리한다. 트리에 있는 모든 위젯 인스턴스에는 그에 대응되는 엘리먼트가 있다.
렌더 오브젝트 : 특정한 위젯 인스턴스를 그리고 레이아웃하는 역할을 한다. 또한 사용자와의 상호 작용(hit testing이나 제스쳐 등)을 다룬다.

엘리먼트의 타입에는 2가지가 있다.
컴포넌트 엘리먼트 : 다른 엘리먼트들로 구성된 그룹 엘리먼트이다. 다른 위젯들로 구성된 위젯과 대응된다.
렌더 오브젝트 엘리먼트 : 렌더 오브젝트를 들고 있는 단일 엘리먼트이다.

각 엘리먼트는 모두 위젯을 색칠하고 배치하고 hit testing을 하기 위한 하나의 렌더 오브젝트를 가지고 있다.

 

다음은 앞서 언급한 card2 UI에 대한 3가지 트리의 예시이다.

 

플러터가 앱을 빌드하면 모든 위젯은 build 메소드를 실행하며 위젯의 서브트리를 구성한다.
위젯 트리의 각 위젯에 대해, 플러터는 이에 대응되는 엘리먼트를 만든다.
엘리먼트 트리는 각 위젯 인스턴스를 관리하고 이를 렌더 오브젝트와 연관시켜서 각각의 위젯을 어떻게 렌더링할지 프레임워크에게 알린다.