플러터 상태관리(statelessWidget, statefulWidget)

플러터에서는 주로 두 가지 유형의 위젯을 사용하는데 바로 statelessWidget과 statefulWidget이다.

이 두 유형의 위젯은 플러터 사용자 인터페이스를 구성하는데 중요한 역할을 하는데 해당 역할에 대해서 말씀드리도록 하겠습니다.

1. StatelessWidget

StatelessWidget은 상태가 없는 위젯입니다. 즉, 이 위젯은 생성될 때 전달받은 정보를 바탕으로 UI를 구성하지만, 생명주기 동안 내부 상태가 변경되지 않습니다. StatelessWidget의 주요 특징은 다음과 같습니다:

• 불변성(Immutability): StatelessWidget은 한 번 생성되면 그 상태가 변경되지 않습니다. 이는 위젯이 변경할 수 있는 내부 상태를 가지지 않음을 의미합니다.
• 재사용성(Reusability): 불변성 때문에 StatelessWidget은 다양한 곳에서 재사용될 수 있습니다. 동일한 정보로 위젯을 여러 번 생성해도 항상 같은 결과를 얻을 수 있습니다.
• 성능(Performance): 상태 변경이 없기 때문에 StatelessWidget은 일반적으로 StatefulWidget보다 성능적인 측면에서 우수합니다.
• 용도: StatelessWidget은 고정된 데이터를 표시하거나, 사용자 상호작용에 의해 상태가 변경될 필요가 없는 경우에 적합합니다. 예를 들어, 텍스트, 아이콘, 데코레이션 등이 이에 해당합니다.

<예시코드>

class WelcomeWidget extends StatelessWidget {
  final String name;

  const WelcomeWidget({Key? key, required this.name}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('안녕하세요, $name!'),
    );
  }
}


class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter 예시'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            WelcomeWidget(name: 'Flutter'),
            SizedBox(height: 20),
            CounterWidget(),
          ],
        ),
      ),
    );
  }
}

 

2. StatefulWidget

StatefulWidget은 상태를 가지는 위젯입니다. 이 위젯은 내부 상태가 시간에 따라 변경될 수 있으며, 상태 변경 시 위젯이 자동으로 다시 빌드됩니다. StatefulWidget의 주요 특징은 다음과 같습니다:

• 상태 변화(Stateful): StatefulWidget은 내부 상태를 가지며, 이 상태는 위젯의 생명주기 동안 변경될 수 있습니다. 상태 변경 시 위젯이 자동으로 업데이트됩니다.
• 동적 인터페이스(Dynamic Interface): 사용자의 상호작용 또는 데이터의 변화에 따라 UI가 업데이트될 필요가 있는 경우 StatefulWidget을 사용합니다. 예를 들어, 사용자 입력 폼, 체크박스, 슬라이더 등이 이에 해당합니다.
• 생명주기(Lifecycle) 관리: StatefulWidget은 생성, 업데이트, 소멸 등과 같은 생명주기를 가지고 있으며, 개발자는 이러한 생명주기에 따라 코드를 작성할 수 있습니다.
• 용도: 동적 데이터 또는 사용자 상호작용에 의해 UI가 변화하는 경우 StatefulWidget이 적합합니다. 예를 들어, 사용자 입력에 반응하거나 데이터 변경에 따라 UI를 업데이트해야 할 때 사용됩니다.

<예시코드>

class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);

  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int counter = 0;

  void incrementCounter() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('버튼을 누른 횟수:'),
          Text(
            '$counter',
            style: Theme.of(context).textTheme.headline4,
          ),
          ElevatedButton(
            onPressed: incrementCounter,
            child: Text('증가'),
          ),
        ],
      ),
    );
  }
}



class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter 예시'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            WelcomeWidget(name: 'Flutter'),
            SizedBox(height: 20),
            CounterWidget(),
          ],
        ),
      ),
    );
  }
}

 

3. 차이점

• 상태 관리: StatelessWidget은 상태를 가지지 않고, StatefulWidget은 내부 상태를 가지며 상태 변경에 따라 UI를 업데이트합니다.
• 재사용성: StatelessWidget은 불변성을 가지므로 다양한 곳에서 재사용하기 쉽습니다. 반면, StatefulWidget은 상태에 따라 다르게 동작할 수 있어 재사용성이 상대적으로 낮을 수 있습니다.
• 생명주기: StatefulWidget은 복잡한 생명주기를 가지며, 상태 관리 및 생명주기에 따른 추가 로직이 필요할 수 있습니다. StatelessWidget은 생명주기 관리가 간단합니다.

두 위젯 유형의 선택은 앱의 요구사항과 상호작용의 복잡성에 따라 달라집니다. 상태 변경이 필요없는 간단한 UI 구성 요소의 경우 StatelessWidget이 적합하고, 사용자 상호작용이나 데이터 변화에 반응해야 하는 경우 StatefulWidget을 사용합니다.