Skip to content

StatefulWidget vs StatelessWidget

Jump to bottom
Seolin(Kirby) edited this page May 25, 2025 · 1 revision

목적: Flutter를 처음 접한 개발자가 StatelessWidget과 StatefulWidget의 차이를 직접 체험하며 이해할 수 있도록, 한 페이지 안에서 실행 가능한 예제 코드와 자세한 설명을 제공합니다.

0. 한 페이지 실습 코드 (DartPad Playground)

코드 실행하기

위 링크를 클릭하면 DartPad에서 코드를 바로 실행해 볼 수 있습니다.

어떻게 동작하나요?

위젯 상태 소유 주체 증가 방법 결과
StatelessCounter 상위 Playground 위젯 "부모 카운터 증가" 버튼 클릭 부모 상태가 변할 때만 숫자 업데이트
StatefulCounter 자신(_StatefulCounterState) 각 위젯의 ➕ 아이콘 클릭 본인만 독립적으로 숫자 증가

✅ 핵심: Stateless 위젯은 자체 상태가 없고 외부에서 주입된 데이터 변화에 따라 다시 빌드됩니다. Stateful 위젯은 내부 상태를 보유하고 setState()로 UI를 직접 갱신할 수 있습니다.

1. 위젯이란?

Flutter 에서 UI 는 **위젯(Widget)**으로 구성됩니다. 위젯은 불변(immutable) 객체이며, UI 스냅샷을 기술합니다. UI에 변화가 필요할 때는 위젯 트리를 다시 구성(빌드)하여 새 위젯을 생성합니다. 이 과정은 선언형(Declarative) 패러다임으로 이해하면 쉽습니다.

2. StatelessWidget

2.1 개념

StatelessWidget은 내부 상태가 없는 위젯입니다.

  • 생성자에서 받은 인자에 의해 최초 빌드가 결정됩니다.
  • 부모 위젯(혹은 상위 계층)의 상태 변화로 인한 새 위젯이 전달될 때만 다시 빌드됩니다.

2.2 코드 예제

class GreetingBanner extends StatelessWidget {
  final String userName;

  const GreetingBanner({super.key, required this.userName});

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

2.3 사용 시점

구분 StatelessWidget 권장 사례
UI 변동성 한 번 그려지면 변하지 않는 정적 화면 요소
데이터 소스 부모에서 전달된 값이 자주 바뀌지 않음
예시 로고, 아이콘, 불변 텍스트 라벨

3. StatefulWidget

3.1 개념

StatefulWidget은 내부 상태를 가질 수 있는 위젯입니다.

  • 상태 객체(State<T>)가 분리되어 있으며, 해당 객체가 setState()를 호출하면 위젯 트리 일부를 다시 빌드합니다.
  • 라이프사이클 메서드(initState, dispose, didUpdateWidget 등)를 제공하여 리소스 초기화·해제, 의존성 변경 대응이 가능합니다.

3.2 코드 예제 (기본 Counter)

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _count = 0;
  void _increment() => setState(() => _count++);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('$_count'),
        ElevatedButton(onPressed: _increment, child: const Text('Add')),
      ],
    );
  }
}

3.3 사용 시점

구분 StatefulWidget 권장 사례
UI 변동성 사용자 상호작용에 따라 실시간으로 변경되는 화면
장기 리소스 AnimationController, TextEditingController 등
예시 폼 입력, 애니메이션, 실시간 피드

4. 둘 사이의 핵심 차이 요약

항목 StatelessWidget StatefulWidget
상태 보유 ❌ ✅
상태 변경 외부 데이터가 바뀔 때 새 인스턴스 생성 내부 setState() 호출
라이프사이클 build() initState(), dispose() 등
장점 가볍고 예측 가능 동적 UI, 리소스 관리
단점 상태를 직접 변경 불가 약간 더 무거움

5. 성능·최적화 팁

  1. 가능하면 Stateless 사용: 불필요한 StatefulWidget은 오버헤드.
  2. const 생성자 활용: 변하지 않는 위젯 재사용.
  3. 위젯 분리: 대형 Stateful 대신 Stateless 하위 위젯 분리.
  4. 리소스 해제: dispose()에서 컨트롤러·리소스 정리.

Clone this wiki locally