[Flutter]StatefulWidget과 StatelessWidget 의 차이 = setState()

StatefulWidget과 StatelessWidget 두 가지 위젯을 간단하게 비교해보겠습니다.

 

---

두 위젯을 직접적인 비교 전에

혹시 알고 계셨나요??

 

StatelessWidget

StatefulWidget

 

 

AndroidStudio 에서 StatelessWidget과 StatefulWidget 은 각각

stl  stf  를 통하여 자동완성으로 간단하고 빠르게 Widget 생성이 가능합니다.

 

(알고 계셨다면... Good)

 

 

 

---

StatelessWidget

 

우선 소스 코드부터 보여드리겠습니다.

 

class LessPage extends StatelessWidget {
  const LessPage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    int _counter = 0;

    void _incrementCounter() {
      _counter++;
      Logger().d('_incrementCounter stateless : $_counter');
    }

    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
                'You have pushed the button this may times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('pop'),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

 

간단합니다.

중앙에 _counter 변수를 Text 위젯으로 보여주고 있고

플로팅 버튼 클릭시 생성된 _incrementCounter 함수를 통하여

_counter 변수를 ++ 증가시켜줍니다.

 

자 그럼 여기서 

버튼 클릭시 _counter 변수는 증가할까요?

그렇다면 _counter 변수를 보여주고 있는 Text 위젯은 변할까요?

 

 

 

 

위의 소스 코드 결과입니다.

 

 

StatelessWidget

 

 

결과는 _counter 변수는 증가 하지만

_counter 값을 보여주는 Text위젯의 값은 그대로 0입니다.

 

StatelessWidget 은 변화가 필요 없는 화면을 구성할 때 사용되는 위젯이며

Stateless 위젯의 build() 메서드는 처음 위젯을 그릴 때 한번 호출되기 때문에

_counter 값은 계속 증가 하지만 위젯은 처음 생성되고 변화가 없기 때문에 그대로입니다.

 

 

---

StatefulWidget

 

그렇다면 StatefulWidget은 어떨까요?

위와 비슷한 소스를 준비했습니다.

 

class FulPage extends StatefulWidget {
  const FulPage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<FulPage> createState() => _FulPageState();
}

class _FulPageState extends State<FulPage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
      Logger().d('_incrementCounter stateful : $_counter');

    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            ElevatedButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: Text('pop')
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

 

 

 

StatefulWidget

 

 

 

Stateless와 Stateful의 차이는

_incrementCounter() 함수 안에 setState() 호출의 유무 차이입니다.

 

setState()는 Stateful 위젯에서 특정 상태 값을 변경할 때 사용되는 메서드입니다.

setState() 메서드 호출 시 다시 build() 메서드를 호출하여 위젯을 다시 갱신합니다.

 

1. 버튼 클릭

2. _incrementCounter() 메서드 호출

3. _counter 변수 증가

4. setState() 메서드가 호출되어 build() 재 호출

5. 관련 위젯 상태 갱신됨 

 

 

 

---

여기까지 저의 긴 글을 읽어주셔서 감사합니다.

제가 습관적으로 코딩을 하는 그날까지 습관적으로 코딩을 하기 위해 글 작성을 꾸준하게 해보겠습니다.