Flutter 이론 정리 - LifeCycle 및 상태관리(1)
플러터를 할 때 알아야 할 기본은 stateless 위젯과 stateful 위젯을 구분해서 적절하게 사용하는 것입니다.
stateless 위젯의 lifecycle은 단순합니다.
state를 따로 두지 않기 때문에 위젯의 내용이 변경된다면 이전 위젯은 삭제하고 새로 위젯을 만드는 과정이 전부입니다. 즉, 한 번의 lifecycle을 도는 동안 constructor를 거쳐, build 함수를 실행하는 순서로 완료됩니다.
반면, Stateful Widget의 Lifecycle은 조금 더 복잡합니다. State를 가지기 때문입니다.
- State calls deactivate()
- State calls dispose()
- Stateful widget calls constructor()
- State passes initState(), didChandeDependencies(), and build() because previous State instatce is reused.
- State calls didUpdateWidget()
- State calls build()
- State calls setState()
- State calls build()
Stateful위젯의 '두 번째(clean에서 왼쪽(didUpdateWidget())으로 가는 사이클)'와 '세 번째(clean에서 오른쪽(setState()으로 가는 사이클)'이 잘 구별이 안 되실 수 있는데요, 코드를 첨부하여 이해를 돕겠습니다.
인프런에서 '코드팩토리'님의 강의를 듣고 있기 때문에 관련 공개되어 있는 코드의 일부를 첨부하겠습니다. https://github.com/codefactory-co/flutter-v1-theory-statefulwidget/blob/main/lib/screen/home_screen.dart
https://github.com/codefactory-co/flutter-v1-theory-statefulwidget/blob/main/lib/screen/home_screen.dart {“payload”:{“allShortcutsEnabled”:false,”fileTree”:{“lib/screen”:{“items”:[{“name”:”home_screen.dart”,”path”:”lib/screen/home_screen.dart”,”contentType”:”file”}],”totalCount”:1},”lib”:{“items”:[{“name”:”screen”,”path”:”lib/screen”,”contentType”:”directory”},{“name”:”main.dart”,”path”:”lib/main.dart”…
아래 코드의 주요 변수는 두 개가 있습니다. 바로 Color color변수와, int number변수입니다.
color변수는 HomeScreen이라는 StatefulWidget이 생성(Constructor)될때 이 위젯의 생성을 call했던 바깥 위젯에서 받아온 color라는 변수를 그대로 반영해서 이 내부의 color변수의 값을 결정해주는 것을 볼 수 있습니다.
잘 보시면 이 HomeScreen이라는 위젯에는 color를 변경해주는 별 다른 이벤트를 call해주는 UI가 없다는 것을 아실 수 있습니다.
왜냐하면 color변수를 final로 지정해서 한번 정해지면 변경되지 않도록 선언해주기도 했고, 그 한번의 지정은 이 stateful Wigdet을 다시 생성하지 않고는 일어나지 않도록 설계했다는 뜻이죠.
바깥 위젯, 예를 들어 rootWigdet이라는 이름을 가진 위젯에서 color를 변경해주는 이벤트를 setState()로 call해주고, 그 변경된 color변수를 가지고 rootWidget의 lifeCycle 내에서 나름의 '세 번째(clean에서 오른쪽(setState()으로 가는 사이클)'이 일어났겠죠?
그러나 HomeScreen 위젯의 입장에서 보자면 바깥 위젯에서 변경한 새로운 color를 constructor로 새로 받아가지고, 다시 update와 build를 하는 '두 번째(clean에서 왼쪽(didUpdateWidget())으로 가는 사이클)'과정을 거치는 것이 전부일 겁니다.
이제 number변수를 볼까요? number변수는 이미 설명했던 color변수가 rootWiget에서 변경되는 사이클과 정확이 일치하는데요, rootWidget과는 달리 제가 아래에 코드를 적어두었으니 이해가 바로 되실 겁니다.
number변수는 HomeScreen Stateful위젯의 State 내에서 지역적으로 선언을 해줍니다.
그리고 특정 UI 버튼을 누르면 setState()함수가 call되면서 그 number 값을 변경해주고, 이 변경된 값의 반영은 바로 build() 함수를 다시 call해주는 것으로 반영이 됩니다. '세 번째(clean에서 오른쪽(setState()으로 가는 사이클)'입니다.
정말 간단하죠?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget {
final Color color;
HomeScreen({
required this.color,
Key? key,
}) : super(key: key) {
print('Widget Constructor 실행!');
}
@override
_HomeScreenState createState() {
print('createState 실행!');
return _HomeScreenState();
}
}
class _HomeScreenState extends State {
int number = 0;
@override
void initState() {
print('initState 실행!');
super.initState();
}
@override
void didChangeDependencies() {
print('didChangeDependencies 실행!');
super.didChangeDependencies();
}
@override
void deactivate() {
print('deactivate 실행!');
super.deactivate();
}
@override
void dispose() {
print('dispose 실행!');
super.dispose();
}
@override
void didUpdateWidget(covariant HomeScreen oldWidget) {
print('didUpdateWidget 실행!');
super.didUpdateWidget(oldWidget);
}
@override
Widget build(BuildContext context) {
print('build 실행!');
return GestureDetector(
onTap: (){
setState((){
number ++;
});
},
child: Container(
width: 50.0,
height: 50.0,
color: widget.color,
child: Center(
child: Text(
number.toString(),
),
),
),
);
}
}
코드팩토리님의 플러터 강의를 구비해놓고도 소홀히 넘어갔던 이론 파트였는데요, 이번 기회에 정리하게 되어서 잘 되었던 것 같습니다. 정리가 꼭 필요한 부분이었던 것 같습니다.
개인적인 생각을 이제 좀 덧붙여보자면, 플러터 위젯의 lifecycle을 보니 유니티의 멀티플레이 네트워크 라이브러리(fishnet, mirror, netcode)를 접했을 때와 느낌이 비슷했습니다. 서버와 클라이언트가 언제 생성되고 연결되는지, 그리고 각 유저가 접속할 때 call되는 여러 순차적인 이벤트 함수들을 직접 print문으로 확인해가면서 감을 잡았던 과정이 떠올랐네요.
또 다른 생각은, 이렇게 기본은 중요하고 꼭 알아야 하지만, 역시 플러터 내부의 lifecycle와 context에만 의존하기 보다는 provider나 riverpod 등 전역적인 상태관리 방법을 더 효율적으로 이용하는 쪽으로 다음 공부를 하는 쪽으로 나아가는 편이 좋다고 생각합니다.
이 글을 쓰며 도움이 되었던 블로그의 링크도 첨부합니다. 그리고 공식 문서도 많은 도움이 되었습니다.
https://fronquarry.tistory.com/16
[flutter] 플러터 StatefulWidget 라이프 사이클 (lifecycle) StatefulWidget(스테이트풀 위젯) 의 라이프 사이클에 대해 알아보도록 하겠습니다. 라이프 사이클과 함께 각 사이클에서 호출되는 훅 메소드도 알아보도록 하겠습니다. StatefulWidget의 라이프사이클 이란? 스테이트풀 위젯에는 lifecycle(생명주기)이 존재합니다. 플러터 앱에서는 위젯의 생성부터 파기까지의 위젯의 생명주기가 관리 되어지고 있고, 생명주기의 특정 시점에서 특정 메소드가 호출되어집니다. 이러한 라이프사이클의 상태를 이해함으로써 위젯의 정교한 제어가 가능해집니다. 위젯을 만들 때 우리가 잘 인식하지 않… StatefulWidget(스테이트풀 위젯) 의 라이프 사이클에 대해 알아보도록 하겠습니다. 라이프 사이클과 함께 각 사이클에서 호출되는 훅 메소드도 알아보도록 하겠습니다. StatefulWidget의 라이프사이클 이란? 스테이트풀 위젯에는 lifecycle(생명주기)이 존재합니다. 플러터 앱에서는 위젯의 생성부터 파기까지의 위젯의 생명주기가 관리 되어지고 있고, 생명주기의 특정 시점에서 특정 메소드가 호출되어집니다. 이러한 라이프사이클의 상태를 이해함으로써 위젯의 정교한 제어가 가능해집니다. 위젯을 만들 때 우리가 잘 인식하지 않…
https://velog.io/@ieed0205/Flutter-1.-Lifecycle%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0
[Flutter] Lifecycle(생명주기)? LEE'Today & 제임쓰쌤 - 1일차(2020.06.04)목차1. Opening2. Stateful은 stack이지!3. Stateful Widget Lifecycle(생명주기)\안녕하세요! LEE'Today 입니다 :)드디어 첫 대면 수업의 당일입니다.이때 LEE'Today & 제임쓰쌤 - 1일차(2020.06.04)목차1. Opening2. Stateful은 stack이지!3. Stateful Widget Lifecycle(생명주기)\안녕하세요! LEE'Today 입니다 :)드디어 첫 대면 수업의 당일입니다.이때
https://docs.flutter.dev/resources/architectural-overview
Flutter architectural overview A high-level overview of the architecture of Flutter, including the core principles and concepts that form its design. A high-level overview of the architecture of Flutter, including the core principles and concepts that form its design.