[Flutter] StatefulWidget VS StatelessWidget 실제 코드와 함께 살펴보기

728x90

Flutter에서 앱을 구성하는 기본적인 요소는 위젯(Widget)입니다. 모든 UI 요소가 위젯으로 이루어져 있으며, 개발자는 위젯을 통해 사용자 인터페이스를 설계하고 화면을 구성합니다.

이 중에서도 가장 중요한 두 가지 위젯이 바로 StatelessWidget과 StatefulWidget입니다. 두 위젯 모두 Flutter의 핵심을 이루지만, 각각의 사용 시나리오와 동작 방식이 다릅니다. 이번 글에서는 StatefulWidget과 StatelessWidget의 차이점과 각 위젯을 언제 사용하는 것이 적절한지에 대해 깊이 있게 알아보겠습니다.

1. StatelessWidget이란?

StatelessWidget은 상태(State)가 없는 위젯을 의미합니다. 즉, 한 번 생성된 후에 화면의 상태가 변경되지 않는 위젯입니다. StatelessWidget은 초기화된 값이나 설정을 기반으로 UI를 렌더링하며, 사용자 상호작용이나 데이터 변경에 따라 화면이 업데이트되지 않습니다.

StatelessWidget은 단순히 화면에 고정된 데이터를 보여주는 용도로 적합합니다. 이러한 위젯은 데이터가 변하지 않으므로 성능적으로도 효율적입니다. 예를 들어, 버튼이나 이미지, 텍스트 등 단순한 UI 요소들은 대부분 StatelessWidget으로 구성됩니다.

StatelessWidget 예시 코드

다음은 간단한 StatelessWidget의 예시입니다.

import 'package:flutter/material.dart';

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('StatelessWidget 예시'),
      ),
      body: Center(
        child: Text('이 위젯은 상태가 없습니다.'),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: MyStatelessWidget(),
));

위 코드에서 보듯이,StatelessWidget은 build() 메서드 내에서 단순히 UI를 렌더링합니다.StatelessWidget은 한 번 렌더링된 후에 변경되지 않기 때문에, UI가 변하지 않는 부분에 적합합니다.

2. StatefulWidget이란?

StatefulWidget은 상태가 변하는 위젯입니다. 즉, StatefulWidget은 사용자의 상호작용이나 데이터 변화에 따라 화면을 다시 렌더링할 수 있습니다. StatefulWidget은 State 객체와 함께 동작하는데, 이 객체는 위젯의 상태를 저장하고, 상태가 변경될 때마다 UI를 업데이트합니다.

Flutter에서 StatefulWidget을 사용하는 대표적인 예로는 사용자의 입력을 받는 폼, 클릭할 때 변화가 발생하는 버튼, 네트워크 요청에 따른 데이터 변동 등이 있습니다. StatefulWidget은 이러한 동적 변화가 필요한 UI에 적합합니다.

StatefulWidget 예시 코드

다음은 간단한 StatefulWidget의 예시입니다.

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('StatefulWidget 예시'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '버튼을 누른 횟수:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '증가',
        child: Icon(Icons.add),
      ),
    );
  }
}

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

이 예시에서StatefulWidget은 상태 변화가 발생할 때마다 화면을 업데이트하는 역할을 합니다. setState() 메서드를 호출하여 _counter 변수를 증가시키고, 그에 따라 화면이 다시 렌더링됩니다.

3. StatefulWidget과 StatelessWidget의 차이점

StatefulWidget과 StatelessWidget의 가장 큰 차이점은 상태 관리입니다. StatelessWidget은 상태를 가지지 않고, 고정된 UI를 렌더링합니다. 반면 StatefulWidget은 상태를 관리하고, 사용자의 상호작용이나 데이터 변화에 따라 UI를 동적으로 변경합니다.

다음은 두 위젯의 차이점을 정리한 표입니다.

구분	Stateless Widget	Stateful Widget
상태	상태가 없음	상태를 가짐
상호작용	사용자 상호작용에 따른 UI 변화가 없음	사용자 상호작용에 따라 상태가 변하고, UI가 업데이트됨
사용 예시	단순한 텍스트, 이미지, 아이콘 등의 고정된 UI 요소	폼 입력, 버튼 클릭, 네트워크 요청에 따른 UI 변화
성능	더 가벼움	상대적으로 무거움

4. StatefulWidget을 사용해야 하는 경우

어떤 경우에 StatefulWidget을 사용해야 할까요? 아래의 경우에는 StatefulWidget이 적합합니다:

사용자의 입력이 필요할 때: 사용자가 입력하는 값에 따라 화면이 변동되는 경우. 예를 들어, 로그인 폼이나 텍스트 입력 필드 등.
데이터가 동적으로 변경될 때: 네트워크에서 데이터를 가져오거나, 내부 데이터 상태가 변할 때. 예를 들어, API 호출 후 데이터를 화면에 표시하는 경우.
애니메이션이 필요할 때: 위젯의 상태가 시간이 지남에 따라 변화하는 경우. 예를 들어, 애니메이션 효과를 사용하는 UI 요소 등.

5. StatelessWidget을 사용해야 하는 경우

반대로, 다음과 같은 상황에서는 StatelessWidget을 사용하는 것이 더 효율적입니다:

고정된 UI를 표현할 때: 화면이 최초에 렌더링된 후 변경되지 않는 경우. 예를 들어, 단순한 텍스트, 아이콘, 이미지 등의 요소.
상호작용이 필요 없는 경우: 사용자가 UI 요소와 상호작용할 필요가 없는 경우. 예를 들어, 앱의 소개 페이지나 고정된 콘텐츠를 보여줄 때.

6. 성능 최적화 측면에서의 고려 사항

Flutter는 기본적으로 성능이 뛰어나지만, StatefulWidget을 너무 많이 사용하면 성능에 부정적인 영향을 줄 수 있습니다. StatefulWidget은 상태가 변경될 때마다 전체 화면을 다시 렌더링하기 때문에, 불필요한 상태 관리는 오버헤드가 발생할 수 있습니다.

따라서 상태 변화가 필요하지 않은 부분은 StatelessWidget으로 유지하고, 최소한의 영역에서만 StatefulWidget을 사용하는 것이 좋습니다. 이렇게 하면 UI를 효율적으로 관리하고 앱의 성능을 최적화할 수 있습니다.

7. StatefulWidget과 StatelessWidget을 함께 사용하는 방법

하나의 화면에서 StatefulWidget과 StatelessWidget을 함께 사용하는 것이 일반적입니다. 화면의 일부분은 상태 변화가 없고, 일부는 상태 변화가 필요한 경우 두 위젯을 적절히 조합하여 사용합니다.

예를 들어, 로그인 화면에서 사용자의 입력을 받는 필드는 StatefulWidget으로 처리하고, 고정된 로고나 설명 텍스트는 StatelessWidget으로 처리할 수 있습니다. 이를 통해 화면을 더 효율적으로 관리하고, 상태 변화에 따라 필요한 부분만 업데이트할 수 있습니다.

8. 결론

StatefulWidget과 StatelessWidget은 Flutter에서 필수적인 두 가지 위젯 유형입니다.

StatelessWidget은 상태가 변하지 않는 간단한 UI를 구현할 때 사용하고, StatefulWidget은 데이터나 사용자 상호작용에 따라 화면을 동적으로 업데이트해야 할 때 사용합니다.

각 위젯의 특성과 차이점을 잘 이해하면, 성능과 유지보수 측면에서 더 효율적인 앱을 개발할 수 있습니다. 특히 불필요한 상태 관리를 피하고, 필요한 부분에만 StatefulWidget을 사용하여 화면을 구성하는 것이 성능 최적화에 큰 도움이 됩니다.