flutter statelessful 와 stateful 비교

열심이·2023년 4월 10일

Flutter에서 위젯은 두 가지 유형으로 구분됩니다. StatelessWidget와 StatefulWidget입니다.

StatelessWidget
StatelessWidget은 변경 불가능한 위젯입니다. 즉, 한번 생성되면 상태가 변하지 않습니다. 이러한 위젯은 보통 화면에 표시되는 간단한 위젯, 예를 들어 텍스트, 이미지, 버튼 등의 위젯에 사용됩니다.

StatelessWidget은 한번 생성되면 build() 메서드를 호출하여 위젯을 생성합니다. 이후에는 상태가 변하지 않으므로, 다시 build() 메서드가 호출되지 않습니다. 즉, 한번 생성된 위젯은 메모리를 차지하지만, 상태가 변하지 않으므로 성능에 미치는 영향은 적습니다.

class MyTextWidget extends StatelessWidget {
  final String text;

  MyTextWidget({required this.text});

  @override
  Widget build(BuildContext context) {
    return Text(text);
  }
}

StatefulWidget
StatefulWidget은 변경 가능한 위젯입니다. 이러한 위젯은 보통 사용자 입력을 처리하거나, 동적인 UI를 구성하는데 사용됩니다.

StatefulWidget은 State 객체와 연결되어 있습니다. State 객체는 위젯의 상태를 나타내며, StatefulWidget의 build() 메서드에서 생성된 위젯에 변화를 줄 수 있습니다.

StatefulWidget은 생성 시점에 createState() 메서드를 호출하여 State 객체를 생성합니다. State 객체는 이후에 build() 메서드에서 변경 사항이 발생할 때마다 업데이트됩니다.

class MyCounterWidget extends StatefulWidget {
  @override
  _MyCounterWidgetState createState() => _MyCounterWidgetState();
}

class _MyCounterWidgetState extends State<MyCounterWidget> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Counter:', style: TextStyle(fontSize: 24)),
        Text(
          '$_counter',
          style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
        ),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

결론적으로, StatelessWidget은 변경 불가능한 위젯으로, 한번 생성되면 상태가 변하지 않습니다. StatefulWidget은 변경 가능한 위젯으로, State 객체와 함께 동작하여 상태가 변경될 때마다 build() 메서드를 호출하여 UI를 업데이트합니다.

profile
열심이하는자

0개의 댓글