코드코도

2. Stateless, Stateful 본문

Flutter/Concept

2. Stateless, Stateful

고도고도 고도고도 2021. 7. 13. 11:08
728x90

플러터의 위젯은 크게 두 가지로 나뉜다.

 

Stateful과 Stateless

 

Stateful은 위젯이 동작하는 동안 내부 클래스에서 데이터 변경이 필요한 경우에 사용된다.

setState 실행 이후 화면을 다시 그려서 변경된 부분을 다시 반영한다.

 

Stateless는 Stateful과 다르게 위젯이 동작하는 동안 데이터 변경이 일어나지 않는 경우에 사용된다.

사용자의 반응과 상관 없이 화면만 보여줄 때 사용한다고 생각하면 된다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text("KoDoHyeon"),
            ),
        ),
    );
  }
}

 

Stateless의 코드이다.

특별한 구문없이 바로 @override를 통한 Widget build(BuildContext context)를 실행하는 것을 볼 수 있다.

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("KoDohyeon"),
        ),
      ),
    );
  }
}

 

Stateless와 다르게 클래스가 1개 추가된 것을 볼 수 있다.

우선 MyApp 클래스에서 createState를 실행한다.

(_MyAppState에서 값이 변경되는 코드를 입력해야하는데 여기선 입력하지 않았다.)

 

생명주기에 관한 좋은 글이 있어서 첨부했다.

https://jaceshim.github.io/2019/01/28/flutter-study-stateful-widget-lifecycle/

 

Stateful Widget Lifecycle(생명주기)

본 문서는 Fluter Example의 내용을 원저작자의 동의하에 번역한것 입니다. 원 저작자 Eric Windmill에게 감사를 전합니다. 이해하는데 불필요한 문장은 과감하게 버렸습니다. 오 번역에 대해서 의견 주

jaceshim.github.io

 

728x90

'Flutter > Concept' 카테고리의 다른 글

5. SingleChildScrollView, ListView  (0) 2021.08.18
4. Column, Row, Expanded  (0) 2021.08.18
3. Container, Padding  (0) 2021.08.18
2. Stateless, Stateful  (0) 2021.07.13
1. Widget  (0) 2021.07.13
0 Comments
댓글쓰기 폼