Flutter 기초 - 2탄 : 화면에 그려지는 모든 것은 위젯이다

이번글에서 알아볼 내용은 Flutter 의 핵심 중 핵심입니다. 바로 화면에 그려진 모든것은 위젯이라는 것인데요. 지금부터 알아보도록 합시다. 이번 글은 아래의 자료를 기반으로 작성됐습니다.

1. Introduction to widgets - Flutter document
2. Layouts in Flutter - Flutter document

 

이 글에서 알아볼 내용

• 화면에 그려지는 모든것이 위젯이다
• 선언적 UI 방식과 Widget
• 위젯 트리와 레이아웃 구성
• StatelessWidget
• StatefulWidget

 

화면에 그려지는 모든것이 위젯이다

 

위의 그림은 Flutter가 UI를 그리기 위한 요소들의 계층을 나타낸 것 입니다. 맨 아래에 Text 위젯을 보시면 이해가 훨씬 편할겁니다. Text 위젯은 말그대로 Flutter 에서 화면에 글자를 나타내기 위해 사용되는 클래스입니다. 이외에도 버튼을 위한 TextButton 위젯, 아이콘을 나타내기 위한 Icon 위젯, 글자를 입력하기 위한 TextInput 위젯 등 UI를 그리기 위한 요소들이 많이 있습니다. 그리고 이런 위젯들은 StatelssWidget, StatefulWidget, etc(RenderObjectWidget, ProxyWidget, etc...) 으로 나뉘고 결국에 최상단에는 Widget 으로 묶입니다. 즉 결국 UI를 그리기 위한 요소들의 핵심은 Widget 입니다. Widget이 도대체 무엇인지 다음 목차에서 알아보도록 합시다.

 

선언적 UI 방식과 Widget

기존에 Android, IOS에서는 명령형 UI 방식(imperative style of UI)을 통해 UI를 작성해왔습니다. 하지만 Flutter에서는 React Native와 같은 선언적 UI(declarative style of UI) 방식을 채택하고 있습니다. 선언적 UI 방식이란 UI 객체를 직접 만드는 것이 아니라 UI의 설명만 작성하는 방식을 뜻합니다. 그러면 프레임워크가 Render Object를 통해 UI객체 생성과 유지를 뒤에서 관리해줍니다. 즉 우리는 UI 객체가 생성되고 유지되는 세세한 작업을 몰라도 된다는 것 입니다. UI에 대한 설명을 작성하면 프레임워크가 나머지는 알아서 관리 해줍니다. 하지만 프레임워크가 UI객체 생성과 유지를 관리 해주기 때문에 UI 객체를 직접 변경할 수 없습니다. UI 객체를 변경하려면 변경사항을 프레임워크에 전달하여 객체를 재생성해야 합니다. 

 

이제 이 내용들을 Flutter에 대입해서 이해해보도록 합시다. 가장 먼저 UI의 설명이 바로 Widget 입니다. Widget을 통해 Flutter 프레임워크가 자동으로 UI객체 생성과 유지를 해줍니다. 그리고 UI 변경을 위해 고안된것이 Widget을 Stateless, Stateful 두 가지로 나누는 것 입니다. 이 두 종류중 StatefulWidget을 사용하면 setState() 함수를 통해 위젯을 다시 그리도록 프레임워크에 요청할 수 있습니다. 

 

위젯 트리와 레이아웃 구성

 

위의 글을 통해서 어떻게 UI 컴포넌트가 그려지는지 이해했습니다. 이제는 어떻게 UI 컴포넌트들을 배치하는지 익혀야 합니다. Flutter는 위젯트리를 이용하여 Widget들의 레이아웃을 구성합니다. 상단의 사진을 보시면 Row, Column과 같은 Widget들이 보이실 겁니다. 해당 위젯들은 각각 자신의 자식들을 행, 열으로 배치하도록 하게하는 위젯입니다. 다음과 같은 트리 형태를 실제로 구현한다면 아래의 화면이 나올 겁니다.

 

 

이렇듯 Flutter에서는 Widget Tree를 이용하여 레이아웃을 구축합니다. 그리고 Flutter는 레이아웃을 구축하는데 도움이 되는 위젯들을 여러 제공하고 있습니다. 위에서 확인하실 수 있는 Row, Column 등은 물론이고 Flex, Stack, etc.. 등 다양한 레이아웃을 구축할 수 있는 Widget들이 존재합니다. 따라서 Flutter를 공부하실때 레이아웃을 구축하는 Widget을 공부하시면 UI를 구축하는데 큰 도움을 받으실 수 있을겁니다.

 

StatelessWidget

위에서도 언급하였지만 결국 Stateless, Stateful은 UI 변경에 대응하기 위해 설계됐습니다. 그 중에 Stateless는 번역대로 변경하지 않는 Widget입니다. 개발을 하다보면 굳이 변경할 필요가 없는 요소들이 존재합니다. 예를 들어 상단에 있는 로고라던지 아니면 Title 같은 요소들은 변경할 이유가 없습니다. 이런 친구들을 전부 변경이 가능한 Widget으로 만드는 것은 불필요한 일이며 비효율적인 일입니다. 따라서 Flutter는 StatelessWidget을 통해 변하지 않는 객체를 지원하고 최대한 많이 사용하길 권장하고 있습니다. 효율적인 측면에서 Stateless 가 Stateful 보다 뛰어나기 때문입니다. 여러분들도 개발할때 반드시 변경이 필요한 것이 아니라면 StatelessWidget을 활용하시길 바라겠습니다.

 

StatefulWidget

https://pub.dev/documentation/flutter_bloc/latest/

 

StatefulWidget은 변경이 일어날때 사용하는 위젯입니다. 위의 gif를 확인해보시면 가운데 Text가 버튼 클릭에 따라 변경되는 것을 확인할 수 있습니다. StatelessWidget으로는 절대 불가능한 구현입니다. 버튼이 클릭될때마다 StatefulWidget의 setState() 함수를 호출하여 UI 객체를 재생성하는 것 입니다. 여러분들이 만약 UI 상의 변경이 일어나야 한다면 StatefulWidget을 사용하시고 setState() 함수를 이용해 UI를 업데이트 하시면 됩니다. 하지만 위에서 말씀드렸다시피 반드시 필요한 상황에서만 사용하시고 웬만해서는 StatelessWidget을 사용하시길 권장드립니다. 특히 Widget Tree에서 최대한 하단에 배치되도록 설계하시는게 좋습니다. StatefulWidget이 다시 재생성하게 되면 해당 위젯의 자식들도 같이 재생성되기 때문에 쓸데없이 큰 비용을 낭비하게 될 수 있습니다.

 

마치면서

이렇게 Flutter UI가 어떻게 Widget으로 구성되는지 알아봤습니다. 선언적 UI 방식과 WidgetTree, StatefulWidget, StatelessWidget 에 대해 이해하시고 가신다면 이번 글은 성공했다고 생각합니다. 만약 그렇다면 여러분들이 Flutter 의 UI 공부를 하는 방향성이 더욱 더 명확해질거라고 생각하기 때문입니다. 다음 글은 Flutter 의 네트워크 통신으로 돌아오도록 하겠습니다. 긴 글 읽어주셔서 감사드립니다.