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

Question

Accepted Answer

Flutter에는 두 가지 근본적인 위젯 유형이 있습니다: **StatelessWidget**(불변이며 변경되는 내부 state가 없음)과 **StatefulWidget**(변경 가능한 state를 보유 및 갱신하며, state가 변경되면 다시 빌드됨). 올바른 것을 선택하는 것은 Flutter UI를 만드는 데 근본적입니다. ## StatelessWidget — 변하는 state 없음 ```dart // StatelessWidget: 입력에 기반해 UI만 기술 (불변, 내부 state 없음) class Greeting extends StatelessWidget { final String name; const Greeting(this.name); @override Widget build(BuildContext context) { return Text('Hello, $name'); // UI는 오직 입력에만 의존, 스스로 변하지 않음 } } // → 스스로 변하지 않는 UI에 사용 (정적 콘텐츠, 입력 기반 표시) ``` ## StatefulWidget — 변경 가능한 state 보유 ```dart // StatefulWidget: 변경 가능한 STATE를 보유 → 변경 시 UI를 다시 빌드 class Counter extends StatefulWidget { @override State createState() => _CounterState(); } class _CounterState extends State { int count = 0; // 변경 가능한 STATE @override Widget build(BuildContext context) { return Column(children: [ Text('Count: $count'), ElevatedButton( onPressed: () => setState(() => count++), // setState → 새 state로 다시 빌드 child: Text('Increment'), ), ]); } } ``` ## setState — StatefulWidget의 핵심 ```text → setState(() { ... })는 state가 변경되었음을 Flutter에 알림 → REBUILD를 트리거 (build()가 새 state로 다시 실행되어 UI를 갱신) → setState 없이 변수를 변경하면 UI가 갱신되지 않음 → StatefulWidget = 위젯 구성(불변) + State 객체(변경 가능한 state 보유) ``` ## 선택하기 ```text STATELESS → 입력에만 기반한 UI; 스스로 변하지 않음 (대부분의 위젯; 더 단순) STATEFUL → 시간에 따라 내부 state를 보유/변경해야 함 (카운터, 폼, 토글, 애니메이션, 변하는 모든 인터랙티브 요소) → 가능하면 Stateless를 선호(더 단순); 변하는 state가 필요할 때 Stateful 사용. ``` ## 왜 중요한가 StatelessWidget과 StatefulWidget의 차이를 이해하는 것은 Flutter 개발에 근본적입니다. 왜냐하면 올바른 것을 선택하는 것이 작동하는 UI를 만드는 데 필수적이기 때문이며, 따라서 반드시 알아야 할 기초 지식입니다. 그 구분 — **StatelessWidget**(불변이며 입력에만 기반해 UI를 기술하고 스스로 변하지 않음)과 **StatefulWidget**(변경 가능한 state를 보유하고 변경 시 UI를 다시 빌드함) — 은 Flutter에서 가장 먼저 배우는 가장 중요한 개념 중 하나로, 어떤 위젯이든 어떻게 만들지를 결정합니다. **StatelessWidget**이 스스로 변하지 않는 UI(정적 콘텐츠, 입력 기반 표시 — 대다수의 위젯이며 더 단순함)에 적합하고, **StatefulWidget**이 변하는 내부 state가 있는 모든 것(카운터, 폼, 토글, 인터랙티브 요소)에 필요하다는 것을 이해하는 것은 올바르게 선택하는 데 필수적입니다. 가장 결정적으로, **setState** — state가 변경되었음을 Flutter에 알려 다시 빌드를 트리거하여 UI가 갱신되게 하는 메커니즘(그리고 이것 없이는 변수를 변경해도 UI가 갱신되지 않는다는, 매우 흔한 초보자의 실수) — 를 이해하는 것은 StatefulWidget을 작동시키는 데 근본적입니다. StatefulWidget이 불변의 위젯 구성과 변경 가능한 state를 보유하는 별도의 State 객체를 결합한다는 것을 이해하면 그 구조가 명확해집니다. 가능하면 **StatelessWidget을 선호**(더 단순)하고 변하는 state가 필요할 때만 StatefulWidget을 사용하라는 지침은 좋은 관행을 반영합니다. 만드는 거의 모든 Flutter 위젯이 이 두 유형 중 하나이며, 올바르게 선택하고(setState를 제대로 사용하여) 기능적이고 인터랙티브한 UI를 만드는 것이 필수적이므로, StatelessWidget과 StatefulWidget을 이해하는 것 — 그 차이, 각각을 언제 사용할지, 그리고 setState의 결정적 역할 — 은 필수적이고 기초적인 Flutter 지식이며, 모든 Flutter 개발자가 작동하는 사용자 인터페이스를 만들기 위해 반드시 이해해야 하는 Flutter 개발의 가장 근본적인 개념 중 하나입니다.