StatelessWidget과 StatefulWidget, 뭐가 다른 건데?

StatelessWidget과 StatefulWidget, 뭐가 다른 건데?

Flutter를 배우다 보면 무조건 마주치는 두 가지 위젯, 바로 StatelessWidget과 StatefulWidget입니다. 이름만 봐도 느낌은 오는데… 실제로 뭐가 어떻게 다른 건지, 언제 뭘 써야 하는지 헷갈릴 수 있죠. 이 글에서는 그 차이점과 사용 시기를 쉽게 풀어서 알려드릴게요.

 

[ 빠르게 이동하기 ]

● 개념부터 간단히

●  StatelessWidger에서 상태값을 바꾸는 방법은?

● 언제 어떤 걸 써야 할까?

● 주의할 점

---

개념부터 간단히!

✅ StatelessWidget

• 상태(state)가 없다.
• 화면이 처음 한 번 렌더링되면 더 이상 변경되지 않음.
• 예: 단순한 텍스트, 아이콘, 이미지 등.

class MyTitle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('안녕하세요!');
  }
}

 

위처럼 build 함수 안에서 정적인 UI만 그리고 끝이에요.

✅ StatefulWidget

• 상태(state)가 있다.
• 어떤 변화가 생기면 화면을 다시 그릴 수 있음 (setState로 갱신)
• 예: 버튼 클릭 시 숫자 증가, 텍스트 입력 등

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('숫자: \$count'),
        ElevatedButton(
          onPressed: () {
            setState(() {
              count++;
            });
          },
          child: Text('증가'),
        )
      ],
    );
  }
}

 

setState를 통해 상태를 바꾸고, 그에 따라 UI가 업데이트되죠.

---

💡 StatelessWidget에서 상태값을 바꾸는 방법은?

"Stateless인데 상태를 바꾼다고요?"라고 생각할 수 있어요. 그런데 StatelessWidget 안에서도 외부의 상태값을 받아서 UI를 갱신할 수 있습니다.

예를 들어:

class CounterDisplay extends StatelessWidget {
  final int count;

  const CounterDisplay({required this.count});

  @override
  Widget build(BuildContext context) {
    return Text('카운트: \$count');
  }
}

 

위처럼 StatelessWidget은 자체적으로 상태를 가지진 않지만, 부모 위젯으로부터 count라는 상태 값을 전달받아 사용할 수 있어요. 즉, 상태의 소유는 외부에 맡기고, 자신은 UI만 표현하는 역할을 하는 거죠.

이렇게 하면 상태 관리를 더 깔끔하게 분리할 수 있고, 성능도 좋아집니다.

---

💡 언제 어떤 걸 써야 할까?

상황 적절한 위젯

단순히 UI만 보여주고 끝나는 경우	StatelessWidget
사용자 인터랙션이나 데이터 변화가 있는 경우	StatefulWidget

• StatelessWidget은 가볍고 성능상 유리
• StatefulWidget은 동적인 앱에 필수

---

❗ 주의할 점

• StatefulWidget은 너무 많이 쓰면 앱이 복잡해지고 느려질 수 있음.
• 가능하면 Stateless로 시작하고, 필요할 때만 Stateful로 전환하는 게 좋아요.

---

✍️ 마무리 요약

• StatelessWidget: 상태 없음, 정적인 UI에 적합
• StatefulWidget: 상태 있음, 동적인 UI에 적합
• Stateless에서도 외부 값을 받아 동적으로 표현 가능
• 기준은? “UI가 바뀌어야 하느냐” 이 한 줄이면 충분!

Flutter에서 이 둘을 잘 구분해서 쓰는 게 앱 구조를 깔끔하게 유지하는 핵심이에요. 처음엔 Stateful이 편하게 느껴질 수 있지만, 익숙해질수록 Stateless로 최대한 간결하게 만드는 게 실력자의 길이랍니다!