Flutter (Stateless Widget vs Stateful Widgets)

Dart와 Flutter에 대해서 공부하던 도중, 

Stateless widget과 Stateful widget에 대해서 공부하게 되었습니다.

 

Stateless Widget : 데이터를 가지고 있지 않은 widget

Stateful Widget : 데이터 소스를 가지고 있는 widget

 

실례를 들어보겠습니다.

 

// app.dart

import 'package:flutter/material.dart';

class App extends StatelessWidget {
	int counter = 0;
}

다음과 같이 Widget 안에서 counter variable을 만들어서 그 variable을 끊임없이 변화하고

저장한다고 한다고 하면, StatelessWidget으로 만드는 건 안좋은 생각인 것입니다.

 

다른 실례를 들어보겠습니다.

 

void main() {
  var app = MaterialApp(
    home: Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          print('Hi there!');
        },
      ),
      appBar: AppBar(
        title: Text('Lets see some images!'),
      ),
    ),
  );

  runApp(app);
}

위의 MaterialApp에서는 string 두 개 이외에는 어디서 data를 받아오거나 

data 를 변환해서 저장하는 역할을 하지 않음으로 stateless widget이 맞는걸로 확인됩니다.

 

StatelessWidget 에는 build method를 구현 해줘야되는데, 

build method는 context를 named parameter로 받습니다. (참고 : named parameter 설명) 

 

import 'package:flutter/material.dart';

class App extends StatelessWidget {
  Widget build(context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            print('Hi there!');
          },
        ),
        appBar: AppBar(
          title: Text('Lets see some images!'),
        ),
      ),
    );
  }
}

그리고 main.dart 안에서 App을 부를수 있습니다.

 

import 'package:flutter/material.dart';
import 'src/app.dart';

void main() {
  runApp(App());
}

runApp의 경우 flutter 기본 라이브러리에서 온 함수이며 widget을 받기 때문에

app.dart에서 전해준 statelesswidget을 돌림을 알 수 있습니다.

 

그럼 이번엔 StatefulWidget에 대해서 알아보도록 합시다.

위에서 말한 듯이, counter variable을 놓고, 버튼을 누를수록 그 variable이 증가하도록 해 봅시다.

 

import 'package:flutter/material.dart';

class App extends StatefulWidget {
  createState() {
    return AppState();
  }
}

class AppState extends State<App> {
  int counter = 0;
  
  Widget build(context) {
    return MaterialApp(
      home: Scaffold(
        body: Text('$counter'),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            setState(() {
              counter += 1;
            });
          },
        ),
        appBar: AppBar(
          title: Text('Lets see some images!'),
        ),
      ),
    );
  }
}

굉장히 많은 것들을 해야되는데, 약간 react랑 비슷한 형태를 띄고 있는것을 볼 수 있습니다.

statefulwidget을 만들기 위해서는, 5가지의 과정이 필요한 것을 볼 수 있습니다.

 

1. widget과 widgetstate 두 개의 class를 만들어 줍니다.

2. Widget에 createState 함수를 구현해 줍니다. createState는 WidgetState를 parameter로 받습니다.

3. widgetState에 build 함수를 구현해 줍니다.

4. WidgetState에 instance variable을 구현해 줍니다.

5. WidgetState의 instance variable이 바뀌는 순간 (예를 들어 버튼 클릭) setState 함수를 부릅니다.

 

상당히 복잡한 방법이네요! 하지만 flutter의 기본적인 문법인 만큼, 

잘 알아두도록 합시다!

 

Reference :  Flutter course on Udemy (by Stephen Grider)