[Flutter] StatelessWidget과 StatefulWidget

Flutter는 Google에서 개발한 크로스 플랫폼 UI 프레임워크로, 풍부한 사용자 인터페이스를 구축하기 위해 다양한 위젯을 제공합니다. StatelessWidget과 StatefulWidget은 Flutter에서 가장 일반적으로 사용되는 위젯 유형 중 두 가지입니다.

이들은 각각 다른 목적과 동작 방식을 가지고 있으며, 앱의 상태 변화에 따라 UI를 업데이트하는 방법이 다릅니다.

이번 포스팅에서는 StatelessWidget과 StatefulWidget에 대해 자세히 알아보고, 언제 사용해야 하는지에 대해 알려드리겠습니다.

 

StatelessWidget

StatelessWidget은 상태가 없는 위젯으로, 한 번 생성된 후에는 변경할 수 없는 UI를 나타냅니다.

StatelessWidget은 불변성(Immutability)을 가지며, 내부 상태가 변경되지 않는 경우에 적합합니다. 예를 들어 앱의 로고, 버튼, 텍스트 라벨 등은 사용자 입력이나 다른 상태에 따라 변경되지 않으므로 StatelessWidget으로 구현할 수 있습니다.

StatelessWidget은 build() 메서드를 구현해야 하며, 이 메서드는 위젯의 구조와 레이아웃을 정의하는데 사용됩니다.

build() 메서드 내에서는 주로 다른 StatelessWidget 또는 StatefulWidget을 조합하여 UI를 작성합니다.

StatefulWidget을 포함한 상위 위젯에서 전달받은 데이터나 속성을 사용하여 UI를 렌더링할 수도 있습니다.

class MyButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;

  const MyButton({required this.text, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text(text),
      onPressed: onPressed,
    );
  }
}

위의 예제에서 MyButton은 StatelessWidget으로 구현되었습니다. build() 메서드에서는 RaisedButton을 반환하며, 주어진 텍스트와 onPressed 콜백을 사용하여 버튼을 생성합니다.

 

StatelessWidget의 주요 특징은 다음과 같습니다:

• 상태가 없으며 변경 불가능한 위젯입니다.
• 한 번 생성된 후에는 다시 빌드되지 않습니다.
• build() 메서드를 사용하여 UI를 작성합니다.
• 외부에서 전달받은 데이터나 속성을 사용하여 UI를 렌더링합니다.

반응형

StatefulWidget

StatefulWidget은 상태를 가지는 위젯으로, 앱의 상태가 변경될 때마다 UI를 업데이트할 수 있습니다. StatefulWidget은 State 객체를 사용하여 상태를 관리하며, 상태가 변경되면 build() 메서드가 호출되어 UI를 다시 그립니다. 상태 변경은 사용자 입력, 데이터 로딩, 타이머 등 다양한 이벤트에 의해 발생할 수 있습니다.

StatefulWidget은 createState() 메서드를 구현해야 하며, 이 메서드에서는 상태 관리를 위한 State 객체를 생성합니다. State 객체는 build() 메서드와 함께 사용되어 UI를 업데이트합니다. State 객체는 StatefulWidget의 생명주기를 관리하고, setState() 메서드를 통해 상태를 변경하여 UI를 업데이트합니다.

 

class Counter extends StatefulWidget {
  @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: $count'),
        RaisedButton(
          child: Text('Increment'),
          onPressed: increment,
        ),
      ],
    );
  }
}

위의 예제에서 Counter는 StatefulWidget으로 구현되었습니다.

createState() 메서드에서는 _CounterState 객체를 생성하여 상태 관리를 합니다. _CounterState 클래스는 count라는 정수형 변수를 가지며, increment() 메서드를 통해 count를 증가시킵니다. setState() 메서드는 count가 변경되었음을 알려 UI를 다시 그리도록 합니다. build() 메서드에서는 현재 count 값을 출력하는 텍스트 위젯과 증가 버튼을 생성합니다.

 

StatefulWidget의 주요 특징은 다음과 같습니다:

• 상태를 가지며 변경 가능한 위젯입니다.
• 상태를 관리하기 위해 State 객체를 사용합니다.
• 상태가 변경되면 setState()를 호출하여 UI를 업데이트합니다.
• build() 메서드를 사용하여 UI를 작성합니다.
• 사용자 입력이나 다른 이벤트에 의해 상태가 변경될 수 있습니다.

결론

이번 포스팅에서는 StatelessWidget과 StatefulWidget에 대해 알아보았습니다. StatelessWidget은 불변성을 가지며, 한 번 생성된 후에는 변경되지 않는 UI를 구현할 때 사용됩니다. StatefulWidget은 상태를 가지며, 상태의 변경에 따라 UI를 업데이트할 수 있습니다. 두 위젯은 각자의 특징과 용도에 따라 사용되며, 적절한 상황에 맞게 선택하여 Flutter 앱을 개발하는 것이 중요합니다. 다음 포스팅에서는 StatelessWidget과 StatefulWidget을 함께 활용하는 실전 예제를 다루어보겠습니다.