728x90
반응형
Flutter에서 StatelessWidget과 StatefulWidget은 애플리케이션 UI를 구성하는 기본 빌딩 블록입니다. 이 두 가지는 서로 다르게 작동하며, 개발자가 앱의 UI 상태를 어떻게 관리할지 결정할 때 중요하게 사용됩니다.
1. StatelessWidget:
- 설명: StatelessWidget은 변경되지 않는 고정된 상태의 위젯입니다. 한 번 렌더링된 후에는 상태가 변하지 않기 때문에 UI는 고정된 상태를 유지합니다.
- 사용 예시: 단순한 텍스트, 아이콘, 버튼 등 상태가 필요 없는 요소들.
- 예제 코드:
class MyStatelessWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text('Hello, World!');
}
}
2. StatefulWidget:
- 설명: StatefulWidget은 상태가 변경될 수 있는 위젯입니다. 내부 상태가 바뀌면 setState()를 호출하여 UI를 다시 렌더링할 수 있습니다.
- 사용 예시: 사용자의 입력, 애니메이션, 카운터 등 동적으로 업데이트되는 UI 요소들.
- 예제 코드:
class MyStatefulWidget extends StatefulWidget {
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: [
Text('Counter: $_counter'),
ElevatedButton(
onPressed: _incrementCounter,
child: Text('Increment'),
),
],
);
}
}
차이점 요약:
- StatelessWidget은 상태를 가지지 않기 때문에 속도와 성능 면에서 더 가볍습니다.
- StatefulWidget은 상태가 변화할 수 있고 setState()를 통해 UI를 업데이트할 수 있습니다.
어떤 위젯을 사용할지 결정할 때는 UI가 동적이고 변경 가능한지를 고려하면 됩니다.
'Category > Flutter' 카테고리의 다른 글
| Dart에서 JSON 쉽게 다루기 : jsonDecode 사용법과 예제 (1) | 2024.11.03 |
|---|---|
| Flutter 라이프사이클 (1) | 2024.11.02 |
| Flutter 프로젝트에서 UI 코드 구조 시각화로 가독성 높이기 (0) | 2024.10.31 |
| Flutter UI 디자인을 위한 Flutter 위젯과 속성 알아보기 (1) | 2024.09.28 |
| Flutter UI 디자인 시 알아야 할 핵심 요소 정리 (1) | 2024.09.28 |