[플러터] Stateless vs Stateful Widget 한번에 정리하기

StatelessWidget

- 상태가 없는 위젯, 빌드가 한번 되면 변하지 않는다, 다시 빌드(build)해주어야 상태가 바뀐다. 작업환경에서는 핫 리로드를 해주면 다시 빌드시킬 수 있다.

StatefulWidget

- 상태가 변할 수 있는 위젯, StatefulWidget을 잘 알기 전에 우선 플러터의 세 가지 트리를 알아야 한다.

 

※ 세가지 Tree

1. Widget tree : 말 그대로 위젯 트리, 플러터는 위젯들이 트리 형태로 구성된다. 루트가 되는 위젯이 있고 그 뒤를 이어 계속 여러 위젯들이 있는 구조이다. 위젯들은 모두 StatelessWidget과 StatefulWidget들로 구성되어 있다.

2. Element tree : 위젯 트리로부터 만들어지는 뼈대가 되는 트리, 위젯 트리를 1:1로 가리키고(포인팅) 있으므로 위젯 트리가 무너져도 바로 세울 수 있게 해 준다. 참고로 원래 가리키고 있던 위젯이 갑자기 없어진다면 위젯들의 순서가 잘못되는 문제가 생길 수도 있는데 이는 key라는 것을 이용하여 해결할 수 있다.

3. Render tree : Element tree 로 부터 화면에 그려주는 역할을 담당하는 트리. Element tree가 위젯 트리안에서 바뀐 것만 알려주기 때문에 화면에서 숫자 하나 바뀌었다고 모든 화면을 다시 그리는 게 아니라 바뀐 숫자만 다시 그려주는 방식이기 때문에 플러터가 빠르게 동작할 수 있다.

 

State의 탄생

모든 위젯들은 한번 빌드되면 변하지 않기 때문에 상태를 변경시키기 위해 State를 따로 두어서 State를 변경시킬 수 있다. 그렇기에 모든 StatefulWidget 은 자신만의 State를 가져야 해서 두 개의 클래스로 나뉘게 되고 서로 연결되어 있는 상태가 되어야 한다. 

기본적인 StatefulWidget 형태

위 코드를 보면 MyApp 클래스는 StatefulWidget 을 상속하고 있다. 부모 클래스(StatefulWidget)에서 createState라는 메소드가 있는데 이를 살펴보면 State<StatefulWidget> createState()  이런식으로 리턴 타입이 State<StatefulWidget> 이므로 @override (덮어쓰기)를 이용하여 리턴 타입을 _MyAppState 로 바꿔주고 _MyAppState() 를 리턴해주면 된다.

_MyAppState 클래스는 State을 상속하고 있는데 타입이 MyApp 이므로 서로 연결되어 있음을 알 수 있다.

 

이제 StatefulWidget의 기본적인 구조가 완성되었다. StatelessWidget은 바로 빌드되고 끝이지만 StatefulWidget은 먼저 createState 로 상태를 만들고 그다음 State 안에서 initState -> didChangeDependencies -> build 순서로 진행이 된다. 
initState와 didChangeDependencies 는 최초 한 번만 실행이 되는데 initState 단계에서는 context 가 전달되지 않는 차이가 있다. 재 빌드를 하고 싶다면 쉽게 setState 를 이용할 수 있고 부모 클래스로부터 전달받아 상태가 바뀐다면 didUpdateWidget 이 호출되어 재 빌드된다.