Flutter - StatelessWidget / StatefulWidget

StatelessWidget

간략히 설명하자면 한번 그려지고 나면 다시 그려지지 않습니다.

예를 들어서 단순히 이미지 + 버튼 링크만 있는 상황이라면 언제나 링크만 동작하면 되기 때문에 이럴때 StatelessWidget을 사용 합니다.

데이터에 의해 값이 변경되지 않을 경우 사용합니다.

 

StatefulWidget

데이터가 변경되면 위젯을 다시 그릴때 사용 합니다.

위젯에 연결된 데이터가 변경되어 위젯 자체의 업데이트가 필요하다면 setState()를 호출하여 build()를 다시 호출 해 줍니다.

이를 통하여 위젯 자체를 다시 그려주게 됩니다.

다시 말하면 위젯에 연결된 변수 업데이트 한다고 build()가 다시 호출되는 것은 아니고 setState()를 호출해야 build()가 호출됩니다.

 

크게 생각 해 본다면 StatefulWidget이 StatelessWidget보다 당연히 리소스를 많이 잡아 먹습니다.

요즘 같이 고성능인 시대에 대수롭지 않을수도 있겠지만 개발된 앱이 지나치게 느리다면 이러한 부분을 잘 생각해서 최적화 해야 합니다.

 

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  var textIndex = 0;
  var testText = ['Hello World?', 'Test Question'];

  void textChange() {
    setState(() {
      if (testText.length > textIndex + 1) {
        textIndex = textIndex + 1;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('StatefulWidget Test'),
      ),
      body: Column(children: [
        Text(
          testText[textIndex],
        ),
        ElevatedButton(onPressed: textChange, child: Text('Next')),
      ]),
    ));
  }
}

간단한 테스트 코드 입니다.

MaterialApp 내부에  testText로 묶인 Text가 하나 있습니다.

이는 textIndex를 참조하게 되고 버튼을 누르게 되면 textIndex가 변경되게 됩니다.

이 과정에서 setState() 를 호출하게 되면서 build()를 다시 호출하게 되며 위젯이 다시 그려지게 됩니다.

textChange()내부에 setState()를 제거하고 그냥 textIndex = textIndex + 1; 만 놔두게 된다면 에러는 발생하지 않게되고 화면 역시 갱신되지 않게 됩니다.