by
Apr 20. 2020
플러터 StatefulWidget
위젯 기본 개념(2/2)
플러터 위젯 기본 개념 (Flutter Widget Fundamental concept) (2/2)
앞서 살펴본 StatelessWidget은 상태(State)를 가지지 않은 위젯이다. 따라서 상태 변경을 감지하지 못하여 화면 구성에 어떤 변화도 주지 않는다.
이와 반대로 상태 변경을 감지하고 변경된 사항을 화면 구성에 실제로 반영할 수 있는 위젯이 바로 StatefulWidget이다. StatefulWidget은 State 객체를 가진다. 거의 대부분의 StatefulWidget은 createState() 함수를 통해서 State 객체를 만드는 작업만 한다. 이 State 객체가 변경 가능한 특징을 가지고 있어서 상태 변경에 대한 처리를 할 수 있다.
StatefulWidget
이전 글에서 약간 변경해서 봤던 기본 예제인 카운터 데모 앱을 간단히 살펴보자. 이번에는 프로젝트 생성 시 탑재된 기본 코드를 그대로 본다. 아래 코드는 주석만 제거했다.
Line 18~24 : StatefulWidget인 MyHomePage는 createState()를 통해서 _MyHomePageState()라는 State 객체를 만든다. 이게 전부다.
Line 27~64 : 세부 내용의 의미는 일단 넘어간다. 간단히 말하면 State의 내용은 StatefulWidget의 동작과 레이아웃 등을 담고 있다. 실질적인 UI를 그리기 위한 위젯 트리(Widget Tree)를 구성하고 있는 것이다.
Line 31 : 특별히 주목해야 하는 부분이 setState() 함수이다. setState() 함수는 build() 함수를 재호출하도록 한다. 따라서 변경된 상태를 위젯에 반영하여 화면이 갱신된다.
StatelessWidget과 다르게 StatefulWidget은 변경 가능하다. 실제 변경되는 것은 State 객체이다. 따라서 우측 하단의 버튼을 누르면 _counter의 변경된 값이 Text 위젯에 반영되는 것을 확인할 수 있다.
State
State는 기본적으로 다음의 특징을 가진다.
1) 위젯이 빌드 완료된 후 읽을 수 있다. 따라서 build() 함수 호출 전에 State 설정이 되어야 한다.
2) 위젯이 유효한 동안에 State는 변경될 수 있다.
State는 생성되면 BuildContext에 연결된다.
BuildContext
BuildContext는 위젯 트리에서 위젯의 위치에 대한 참조이다. 또한 하나의 BuildContext는 하나의 위젯만 가진다.
Widget Tree
위젯은 트리 구조로 구성되어 있다. 이것을 위젯 트리(Widget Tree)라고 한다. 앞선 카운터 데모 앱의 위젯 트리는 다음과 같다.
각 네모 박스가 모두 위젯이다. StatelessWidget인 MyApp도 위젯이고 StatefulWidget인 MyHomePage도 위젯이다. MyHomePage에서 생성된 State 객체인 _MyHomePageState에서 UI를 구성하는 모든 요소가 위젯이다.
또한 부모 위젯과 자식 위젯이라는 개념이 있다. 예를 들면 Scaffold의 속성으로 구성된 AppBar, Center, FloatingActionButton은 자식 위젯이고 자식 위젯을 포함하고 있는 Scaffold는 부모 위젯이다.
플러터는 세 가지 트리를 가진다. 앞서 말한 위젯 트리 외에 요소(Element), 랜더 객체(RenderObject) 트리가 있다.
위젯 : 요소의 구성(Configuration)을 기술하고 처리한다.
요소 : 트리의 특정 위치에서 위젯을 인스턴스화 한다.
렌더 객체 : 크기, 레이아웃 등을 다루고 렌더링을 처리한다.
요소 트리의 개념을 보면 BuildContext와 유사한 부분이 있다. 바로 위치이다. BuildContext가 트리에서 위젯의 위치에 관한 참조인데 요소는 특정 위치에서 위젯을 인스턴스화 한 것이다. 결국 요소를 참조하는 것이 BuildContext인 것이다. 더 쉽게는 BuildContext가 요소라고 생각하면 된다.
BuildContext를 위젯 트리에 도식화하면 다음과 같다. 컬러로 표시한 부분이 모두 하나의 BuildContext인 것이다. 그리고 각 BuildContext에 위젯이 존재한다. 즉 위젯이 인스턴스화 된 상태이므로 이것은 곧 요소라고 볼 수 있다.
