StatefulWidget과 StatelessWidget의 차이점은 무엇인가요?

질문

StatefulWidget과 StatelessWidget의 차이점은 무엇인가요?

답변

Flutter에서 StatefulWidget과 StatelessWidget은 위젯의 두 가지 기본 유형으로, 상태(state) 관리 방식에 따라 구분됩니다.

StatelessWidget

StatelessWidget은 변경 불가능한(immutable) 위젯으로, 한 번 생성되면 그 속성이나 상태가 변경되지 않습니다.

특징:

• 불변성: 생성 후 속성이 변경되지 않음
• 가벼움: 상태를 저장하지 않아 리소스 사용이 적음
• 단순함: 구현이 간단하고 직관적임
• 재사용성: 동일한 속성으로 여러 곳에서 재사용 가능

적합한 사용 사례:

• 정적 콘텐츠 표시
• 부모 위젯으로부터 받은 데이터만 표시
• 사용자 상호작용이 필요 없는 UI 요소

예제 코드:

class GreetingCard extends StatelessWidget {
  final String name;

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

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

StatefulWidget

StatefulWidget은 변경 가능한(mutable) 위젯으로, 수명 주기 동안 상태가 변경될 수 있습니다.

특징:

• 가변성: 위젯의 수명 주기 동안 상태 변경 가능
• State 객체: 별도의 State 클래스를 통해 상태 관리
• 동적 UI: 사용자 상호작용이나 데이터 변경에 따라 UI 업데이트 가능
• 생명주기 메서드: initState(), dispose() 등 다양한 생명주기 메서드 제공

적합한 사용 사례:

• 사용자 입력을 처리하는 폼
• 애니메이션이 필요한 UI
• 데이터 변경에 따라 UI가 변경되어야 하는 경우
• 타이머, 스트림 등 시간이 지남에 따라 변경되는 데이터 표시

예제 코드:

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

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

class _CounterState extends State<Counter> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('카운트: $_count'),
        ElevatedButton(
          onPressed: _increment,
          child: Text('증가'),
        ),
      ],
    );
  }
}

주요 차이점 요약

선택 기준

• UI가 정적이고 변경되지 않으면 StatelessWidget 사용
• UI가 동적이며 시간이 지남에 따라 변경되면 StatefulWidget 사용
• 성능 최적화를 위해 가능한 한 StatelessWidget 사용을 권장