[Flutter] StatelessWidget과 StatefulWidget 기본

Flutter에서 화면을 구현할 때 주로 StatelessWidget 혹은 StatefulWidget을 확장(extend)해서 구현한다. 이때 build() 함수를 여러가지 low-level의 Widget들의 조합으로 정의해야한다. StatelessWidget과 StatefulWidget은 약간의 구현방식의 차이가 있다. 그 이름(Stateless, Stateful)에서 어느 정도 그 특징을 알 수 있듯이 StatelessWidget은 상태가 없고, 변화가 없는 Widget이고, StatefulWidget은 상태가 있으며 상태에 따라 변화가 되는 Widget이다. 

StatelessWidget

StatelessWidget의 build 함수는 화면이 처음 그려질 때 한번만 불려지며, Widget을 삭제하기 전까지 다시 불려지지 않는다. 별도의 상태를 변경할 수 없는 Widget들을 나타낸다. 즉, 한번 화면에 나타나면 변경될 수 없다. 

이러한 StatelessWidget을 구현하기 위해서는 build() 함수를 오버라이드하여 Widget에서 활용할 Low-Level의 Widget들을 반환한다. 다음 예제를 보자. 

import 'package:flutter/material.dart';

void main() {
  runApp(MyWidget());
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'Hello',
            textDirection: TextDirection.ltr,
          ),
          Text(
            'World',
            textDirection: TextDirection.ltr,
          ),
        ],
      )),
    );
  }
}

StatelessWidget 예제

build() 함수를 보면 Widget들을 트리 형태로 조합하여 반환하는 방식으로 구현한다. 오른쪽 그림은 build() 함수에서 구현한 Widget 들의 관계를 나타낸다. Container 내부에 child로 Column을 가지고 있고 Column 내부에 2개의 Text를 가지고 있다.  

StatefulWidget

StatefulWidget은 상태에 따라 변화하는 Widget을 나타낸다. 위젯 내부의 상태가 변화하면 build 함수를 다시 불러서 View를 다시 그리게 된다. 상태(state)가 변화하는 방법은 Widget이 가지고 있는 변수 혹은 State 클래스 내에 있는 변수를 변화시켜주면 상태가 변화한 것이다. 상태가 단순히 변화된 것 외에 View를 다시 그리라고는 것을 알려줘야 하는데 이를 setState 함수를 불러서 처리할 수 있다. 설명만 들으면 실체를 알 수 없으니 다음 예제를 보자. 

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: MyWidget(),
    ),
  ));
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int count = 0;
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            '$count',
            textDirection: TextDirection.ltr,
          ),
          RaisedButton(
            onPressed: () {
              setState(() {
                count++;
              });
            },
            child: Text("+1"),
          )
        ],
      )),
    );
  }
}

MyWidget 클래스를 보면 createState() 함수가 있고 반환값으로 _MyWidgetState 클래스이다. State 클래스는 build 함수를 가진다. 아까 StatelessWidget과는 다른 것이 statefulWidget은 createState 함수에서 State 클래스를 확장한 _MyWidgetState 객체를 반환한다. 그리고 build 함수는 _MyWidgetState 클래스에 정의 되어 있다. 여기서 StatelessWidget과 StatefulWidget의 차이는 State 클래스가 있느냐 없느냐 라고 볼 수 있다.

이때 View를 다시 그리는 시점이 중요한데, StatefulWidget은 State class에서 setState() 함수가 불려졌을 때 build 함수를 다시 불러서 View를 다시 그리게 된다. 위의 setState()함수에서 count에 값이 1 증가하고, 증가된 값을 활용해서 build()함수를 다시 부르게 되는 것이다. 즉, StatefulWidget은 내부의 상태가 view를 다시 그리는 역할을 하게 되는 것이다. 

이러한 StatelessWidget과 StatefulWidget은 그 필요에 따라 상황에 맞춰서 불러서 사용할 수 있다. view가 큰 변화가 없다면 stateless가 효율적이고, 특정 상태에 따라 변화면 필요하면 stateful을 활용하는 것이 좋을 것이다. 그리고 처음에 View의 틀을 잡을 때는 StatelessWidget으로 틀을 잡고나서 상태에 따른 변화가 필요할 때 StatefulWidget으로 변화를 주는 방법도 있다.