[Flutter] 위젯(Widget)이란? | Stateful과 Stateless의 차이

🚀 [Flutter] 위젯(Widget)이란? | Stateful과 Stateless의 차이

목차

• 개요
• 1. 위젯(Widget)이란?
  • 1.1 위젯의 역할과 구조
  • 1.2 위젯 사용 예시
• 2. Stateful과 Stateless 위젯
  • 2.1 StatelessWidget
  • 2.2 StatefulWidget
  • 2.3 두 위젯의 차이점과 예시
• 3. 결론

---

개요

안녕하세요! 오늘은 Flutter에서 가장 중요한 개념 중 하나인 위젯(Widget)에 대해 이야기해보려고 합니다.

Flutter에서는 모든 UI가 위젯으로 구성되며, 이 위젯은 크게 두 가지 유형으로 나뉩니다: Stateful과 Stateless. 이 두 가지 위젯의 차이점과 각각의 역할을 예시와 함께 설명해드릴게요.

---

1. 위젯(Widget)이란?

1.1 위젯의 역할과 구조

Flutter에서 UI는 위젯을 사용하여 구성됩니다. 위젯은 Flutter 애플리케이션의 모든 UI 요소를 표현하며, 이 위젯을 조합하여 트리 구조로 화면을 구성합니다.

예를 들어, 텍스트, 이미지, 버튼, 리스트 등 모든 UI 요소가 위젯으로 구현됩니다. 위젯은 부모-자식 관계로 계층적으로 연결되며, 이를 통해 UI를 쉽게 확장하고 유지 관리할 수 있습니다.

1.2 위젯 사용 예시

Flutter에서 기본적인 위젯 사용 예시는 다음과 같습니다:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter 위젯 예시'),
        ),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

위의 코드는 Flutter에서 텍스트(Text) 위젯을 사용하여 "Hello, Flutter!"라는 문구를 중앙에 표시하는 간단한 예시입니다. 모든 UI 요소가 위젯으로 표현되며, 각 위젯이 부모-자식 관계로 구성됩니다.

---

2. Stateful과 Stateless 위젯

2.1 StatelessWidget

StatelessWidget은 말 그대로 상태가 없는 위젯입니다. 즉, 한 번 생성되면 상태가 변경되지 않는 UI 요소를 표현할 때 사용합니다. 예를 들어, 텍스트나 아이콘처럼 고정된 값을 표시할 때 많이 사용됩니다.

대표적인 StatelessWidget 사용 예시는 다음과 같습니다:

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('나는 StatelessWidget입니다.'),
    );
  }
}

위 예시에서 텍스트는 고정된 값이며, 사용자의 입력이나 상호작용에 의해 변화하지 않습니다. 한 번 그려진 후에는 재빌드되지 않는 고정적인 UI 요소를 표현합니다.

2.2 StatefulWidget

StatefulWidget은 상태가 변경될 수 있는 위젯입니다. 즉, 사용자의 입력이나 상호작용에 따라 UI가 동적으로 변화해야 할 때 사용합니다. 대표적으로 버튼 클릭, 입력 필드의 변화 등이 이에 해당됩니다.

예를 들어, 클릭 횟수를 화면에 표시하는 간단한 StatefulWidget 예시는 다음과 같습니다:

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('StatefulWidget 예시'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('버튼을 누른 횟수:'),
            Text('$_counter', style: Theme.of(context).textTheme.headline4),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

위 예시에서는 버튼을 누를 때마다 _counter 값이 증가하며, 화면에 표시된 값도 함께 변경됩니다. 이처럼 StatefulWidget은 상태가 변경될 때마다 UI가 다시 그려집니다.

2.3 두 위젯의 차이점과 예시

StatelessWidget은 한 번 그려진 후 상태가 변하지 않으며, StatefulWidget은 상태가 변할 때마다 다시 그려집니다. 간단히 요약하면:

• StatelessWidget: 상태가 변하지 않는 고정된 UI
• StatefulWidget: 상태에 따라 동적으로 변하는 UI

적절한 예시를 통해 두 위젯의 차이를 이해할 수 있습니다. StatelessWidget은 고정된 UI 요소에, StatefulWidget은 상호작용에 따라 변경되는 UI 요소에 사용합니다.

---

3. 결론

Flutter에서 위젯은 앱의 모든 UI를 구성하는 중요한 요소입니다. 특히, Stateless와 Stateful 위젯의 차이를 이해하는 것은 매우 중요합니다. 이 두 위젯을 적절하게 사용하여 효율적이고 반응성이 좋은 Flutter 애플리케이션을 만들어보세요! 🚀