[ 앱 개발자 도전기 : 크로스플랫폼_Flutter & Dart ] StatefulWidget vs StatelessWidget

▽FLutter : StatefulWidget vs StatelessWidget

목  차

1.위젯이란

2.상태(state)란?

3.StatefulWidget이란?

4.StatelessWidget이란?

5.공통점

6.차이점

Ⅰ. 위젯이란.

---

Flutter에서 위젯은 UI를 구성하는 기본 단위입니다.

텍스트, 이미지, 버튼 등 모든 UI 요소가 위젯으로 이루어져 있습니다.
뿐만 아니라 레이아웃을 구성하는 모든 요소들도 위젯으로 이루어져 있습니다.

웹에 비유해보면, 'div'태그도 위젯 p태그도 위젯, 모든 태그를 위젯으로 생각하면 편합니다.

위젯은 서로 포함될 수 있어 트리 구조로 구성됩니다.
한 위젯 내에 다른 위젯들을 포함시킬 수 있기에 위젯들은 서로 부모-자식 관계로 구성됩니다.

◇Widget의 타입.
1. Stateless Widget(상태가 없는 정적인 위젯) : 이전 상호작용의 어떠한 값도 저장X
2. Stateful Widget(계속 움직이거나 변화가 있는 위젯) : Value 값을 지속적으로 보존.
3. Inherited Widget

Ⅱ. 상태(State)란?

---

상태는 위젯이 빌드될 때 동기적으로 읽을 수 있는 정보로, 위젯의 수명 주기 동안 변경되거나 유지될 수 있습니다. 예를 들어, 사용자 입력이나 네트워크 호출 결과에 따라 상태가 변할 수 있습니다.

Flutter에서 State는 위젯의 상태를 관리하는데 사용됩니다.

State는 두 가지 주요 유형으로 나뉩니다.

StatelessWidget과 StatefulWidget , 이 두가지는 서로 다른 방식으로 위젯의 상태를 처리합니다.

• StatelessWidget은 변경되지 않는 상태를 가지는 위젯입니다.
  • 즉, 한 번 생성되면 상태가 변하지 않습니다.
  • 이러한 위젯은 상태를 가지지 않고, 빌드 시 제공된 데이터로만 렌더링됩니다.

• StatefulWidget은 변경 가능한 상태를 가지는 위젯입니다.
  • StatefulWidget은 자체적으로 상태를 관리하며, 상태가 변경될 때마다 다시 빌드됩니다.
  • StatefulWidget은 두 개의 클래스가 함께 작동합니다:
    • StatefulWidget 클래스와 State 클래스.

플러터(Flutter)에서 위젯의 상태는 중요한 개념입니다.
예를 들어, Stateful 위젯은 내부에 상태를 가지고 있고,
이 상태는 위젯이 화면에 어떻게 보여지는지 결정합니다.
상태가 변경되면 화면이 다시 그려져서 사용자에게 업데이트된 내용을 보여줍니다.

Ⅲ. StatefulWidget이란?

---

Stateful 위젯 (상태가 있는 위젯)

위젯이 동작하는 동안 Data 변경이 필요한 경우
화면을 다시 그려서 변경된 부분을 위젯에 반영하는 동적인 위젯으로
이벤트 또는 사용자 상호 작용에 의해 동작한다.

• Stateful 위젯은 내부에 상태를 가지고 있으며, 상태가 변경될 때마다 화면이 다시 그려집니다.
• Stateful 위젯은 State 객체와 함께 사용됩니다.
  • State 객체는 위젯의 상태를 관리하고,
    상태가 변경될 때마다 setState() 메서드를 호출하여, 화면을 다시 그리는 로직을 수행합니다.

import 'package:flutter/material.dart';

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

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

void main() => runApp(MaterialApp(home: MyStatefulWidget()));

Stateful Widget의 동작 방식..

1. createState():
• StatefulWidget은 createState 메서드를 통해 State 객체를 생성합니다.
• 이 객체는 위젯의 상태를 관리합니다.

2. State 객체:
• State 객체는 위젯의 상태를 포함하며,
상태가 변경될 때 setState 메서드를 호출하여 UI를 업데이트합니다.
• setState는 상태를 변경하고, 변경된 상태를 기반으로 위젯을 다시 빌드합니다.

3. initState():
• initState는 State 객체가 처음 생성될 때 호출되며, 초기화 작업을 수행합니다.

4. dispose():
• dispose는 State 객체가 소멸될 때 호출되며, 리소스를 정리하는 작업을 수행합니다.

State의 생명주기.

• initState()
: State 객체가 처음 생성될 때 호출됩니다.
• build()
: 상태가 변경될 때마다 호출되어 위젯을 다시 빌드합니다.
• didUpdateWidget()
: 위젯이 업데이트될 때 호출됩니다.
• dispose()
: State 객체가 소멸될 때 호출됩니다.

Ⅳ. StatelessWidget이란?

---

Stateless 위젯(상태가 없는 위젯)

StatelessWidget은 상태가 변하지 않는 정적인 위젯으로, 한 번 생성되면 UI가 변경되지 않습니다. 주로 고정된 UI 요소를 표시할 때 사용됩니다.

화면이 로드될 때 한 번만 그려지는 State가 없는 위젯으로
변경이 필요한 Data가 없는 것을 의미하며
이벤트 또는 사용자 상호 작용에 의해 동작하지 않는다.

Stateless 위젯은 상태를 가지지 않으며, 한 번 생성되면 변하지 않습니다.

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  final String title;

  MyStatelessWidget({required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text('Hello, $title!'),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: MyStatelessWidget(title: 'Stateless Widget')));

Ⅴ. 공통점.

---

• 위젯 트리 구조: 둘 다 위젯 트리 구조에 포함되어 있으며, 서로 포함될 수 있습니다.

• build 메서드: 둘 다 build 메서드를 통해 UI를 정의합니다.

Ⅵ. 차이점.

---

그럼 stateful 위젯만 사용하면 되지 않나?
: Stateless 위젯은 렌더링이 필요한 경우에만 다시 그려지기 때문에 성능이 향상될 수 있습니다.

• StatelessWidgetSample은 StatelessWidget을 상속하고, build() 함수를 @override 하고 있습니다.

  • build() 함수는 parameter로 context (context = 부모 Wiget의 정보임)를 받고 있고,
  • Wiget 타입을 return하게 되어 있습니다.

• StatefulWidgetSample은 StatefulWidget 을 상속 받아서
  _createState() 함수를 @override하고 있습니다.

  • _createState() 함수는 _StatefulWidgetSampleState() Class를 생성하고,

  • 이는 State을 상속 받아 build() 함수를 @override 합니다.

  • Stateful 위젯은 _createstate() 메소드로 State(상태)를 생성합니다.

차이점 1 : 상태 관리.

• StatelessWidget: 상태가 변하지 않습니다.

  • 한 번 생성되면 UI가 변경되지 않습니다.
  • 예를 들어, 정적인 텍스트나 이미지 같은 경우에 사용됩니다.

• StatefulWidget: 상태가 변할 수 있습니다.

  • 사용자 입력이나 네트워크 요청 등으로 인해 상태가 변경되면 UI가 자동으로 업데이트됩니다.

차이점 2 : UI업데이트.

• StatelessWidget: 상태가 변하지 않기 때문에 UI가 변경되지 않습니다.

  • 따라서 재빌드가 필요하지 않아 성능이 좋습니다.

• StatefulWidget: 상태가 변경되면 setState() 메서드를 호출하여 UI를 재빌드합니다.

  • 이는 사용자 인터랙션에 반응하는 동적인 UI를 구현할 때 유용합니다.

차이점 3 : 복잡성.

• StatelessWidget: 단순하고 직관적입니다.

  • 상태 관리가 필요하지 않아 코드가 간결합니다.

• StatefulWidget: 상태 관리가 필요하여 복잡할 수 있습니다.

  • 하지만 동적인 UI를 구현할 때 필수적입니다.

차이점 4 : 사용 사례.

• StatelessWidget: 정적인 UI 요소, 예를 들어 고정된 텍스트, 이미지 등.

• StatefulWidget: 동적인 UI 요소, 예를 들어 버튼 클릭 시 텍스트가 변경되는 경우,

  • 체크박스, 라디오 버튼 등.